Html
    Css
    Js

    
                        
body,div,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,table,th,td,input,button,select,textarea {
	margin:0;
	padding:0;
	font-style:normal;
	font:12px/22px Arial,Helvetica,sans-serif;
}
ol,ul,li {
	list-style:none;
}
img {
	border:0;
	vertical-align:middle;
}
body {
	color:#000000;
	background:#FFF;
}
a {
	color:#000000;
	text-decoration:none;
}
a:hover {
	color:#F00;
}
#box {
	width:830px;
	height:300px;
	margin:50px auto 0px;
}
#box .left,#box .right,#box .in {
	border:1px solid #ccc;
}
#box .left,#box .right {
	width:278px;
	height:278px;
	margin:10px;
	padding:10px;
	color:#ff8080;
	float:left;
	font-size:16px;
}
#box .in {
	float:left;
	width:160px;
	height:298px;
	margin:10px;
	border:1px solid #ccc;
}
#box .in .btn {
	display:block;
	width:130px;
	height:40px;
	border:none;
	outline:none;
	margin:20px auto 0;
	background:#ff8080;
	color:#fff;
}
#box .in .btn:hover {
	background:#ff0000;
	cursor:pointer;
}
#box .in .progress {
	display:none;
	width:100%;
	margin:50px 0 0;
	text-align:center;
}
#box .in .progress progress {
	display:block;
	width:120px;
	height:20px;
	margin:5px auto 0
}
#box .in .progress span {
	font-size:16px;
}
#box .in .progress_quotes {
	display:none;
	width:85px;
	margin:20px auto 0;
}
#box .in .progress_quotes span {
	display:inline-block;
	width:12px;
	height:32px;
	border:1px solid #ccc;
}
#box .in .progress_quotes span.on {
	background:#ff8080;
}
#box .in .counts {
	display:none;
	width:50px;
	height:20px;
	margin:0 auto;
	text-align:center;
	line-height:20px;
	font-size:16px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

文字搬运效果

练习项目,希望能帮助到需要此效果的同学

1
      二十三岁0
      2017/11/14 15:35:39

      连续点击有问题的!

      回复