百叶窗特效（用move.js库）

每逢佳节胖三斤啊，胖了胖了，加上每天坐在电脑前，现在还和一个智障聊天，后天去苏州玩的事情，住哪里啊？去哪里嘿嘿嘿啊？

苏州，找了下，攻略，听说一定要去园林看，听说很牛逼，好吧，陶冶一下我的情操。今天操作的是一个，百叶窗效果的一个页面特

效，好，现在直接上最终效果吧。demo做的有点low,不过效果都在了

 这是html和css代码：思路就是，每一个li里面div，放几个p,通过调节translatY，来控制。

<style>
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			#bai{
				width: 400px;
				height: auto;
				float: left;
				margin-left:20px auto;
			}
			li{
				text-align: center;
				width: 100%;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px dashed #000;
				position: relative;
				overflow: hidden;
			}
			div.box{
				width: 100%;
				height: 50px;
				position: absolute;
				top: -50px;
			}
			p{
				height: 50px;
			}
		</style>
	</head>
	<body>
		<ul id="bai">
			<li>
				<div class="box a1">
					<p>1111111111111111</p>
					<p>22222222222222222</p>
				</div>
			</li>
			<li>
				<div class="box a2">
					<p>33333333333333333</p>
					<p>44444444444444444</p>
				</div>
			</li>
			<li>
				<div class="box a3">
					<p>55555555555555555</p>
					<p>66666666666666666</p>
				</div>
			</li>
			<li>
				<div class="box a4">
					<p>77777777777777777</p>
					<p>88888888888888888</p>
				</div>
			</li>
		</ul>

　关键在这里：可以来这里下载　

<script src="js库/move.min.js"></script>

　　导入这个，这个插件怎么用呢？具体的我就不讲了，可以看这里 这位兄台讲的挺好的。关键就是，move()里面取代的对象，跟jquery $取DOM节点对象一样,下面简单的陈了一些方法

    

move('.square')
 .to(500, 200)
 .rotate(180)
 .scale(.5)
 .set('background-color', '#FF0551')
 .set('border-color', 'black')
 .duration('3s')
 .skew(50, -10)
 .then()
 .set('opacity', 0)
 .duration('0.3s')
 .scale(0.1)
 .pop()
 .end();

　　

   接下来，放上接下来全部js代码，整体思路是，两个定时器，一个定时器来定时总的时间，多久后开始，第二次定时器，是每个小div，依次多久执行动画。

<script>
			window.onload = function(){
				var num=1; /*为了取到各个div*/
				var timer=null;/*定义定时器*/
				var tet = false;/*这里用来判断方向*/
				
				ding();
				function ding(){
					setInterval(function(){
						change();
					},3000)
				}
				function change(){
					
					timer=setInterval(function(){
						if(num == 5){
							clearInterval(timer);
							num=1;
							tet = !tet;
						}
						else if(tet == false){
							move("#bai .a"+num+"").y(50).end();/*这里用到就是，move中的translateY方法，简称y()*/
							num++;
						} 
						else{
							move("#bai .a"+num+"").y(0).end();
							num++;
						} 
					},100)
				}
			}
		</script>

　　

posted on 2017-02-07 21:29  xiao_style  阅读(2165)  评论(0)  编辑  收藏  举报

导航