百葉窗特效（用move.js庫）

時間 2019-11-20

原文原文鏈接

每逢佳節胖三斤啊，胖了胖了，加上天天坐在電腦前，如今還和一個智障聊天，後天去蘇州玩的事情，住哪裏啊？去哪裏嘿嘿嘿啊？javascript

蘇州，找了下，攻略，據說必定要去園林看，據說很牛逼，好吧，陶冶一下個人情操。今天操做的是一個，百葉窗效果的一個頁面特css

效，好，如今直接上最終效果吧。demo作的有點low,不過效果都在了html

這是html和css代碼：思路就是，每個li裏面div，放幾個p,經過調節translatY，來控制。java

<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>

　關鍵在這裏：能夠來這裏下載　jquery

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

　　導入這個，這個插件怎麼用呢？具體的我就不講了，能夠看這裏這位兄臺講的挺好的。關鍵就是，move()裏面取代的對象，跟jquery $取DOM節點對象同樣,下面簡單的陳了一些方法git

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，依次多久執行動畫。github

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。