溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何使用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> 感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用move.js庫實現百葉窗特效”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
