用move.js庫實現(xiàn)百葉窗特效
更新時間：2017年02月08日 08:58:35 作者：xiao_style
本文主要介紹了用move.js庫實現(xiàn)百葉窗特效的思路與方法。具有很好的參考價值，下面跟著小編一起來看下吧
今天操作的是一個，百葉窗效果的一個頁面特效，好，現(xiàn)在直接上最終效果吧。demo做的有點low,不過效果都在了
這是html和css代碼：思路就是，每一個li里面div，放幾個p,通過調(diào)節(jié)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節(jié)點對象一樣,下面簡單的陳了一些方法
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，依次多久執(zhí)行動畫。
<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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
用js實現(xiàn)的自定義的對話框的實現(xiàn)代碼
javascript alert函數(shù)的替代方案，一個自定義的對話框的方法2010-03-03
Express框架Router?Route?Layer對象使用示例詳解
這篇文章主要為大家介紹了Express框架Router?Route?Layer對象使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
下面小編就為大家?guī)硪黄獪\談JS中逗號運算符的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
mongodb的數(shù)據(jù)存儲格式是一種由于MongoDB的文檔結(jié)構(gòu)為BJSON格式（BJSON全稱：Binary JSON），而BJSON格式本身就支持保存二進制格式的數(shù)據(jù)，因此可以把文件的二進制格式的數(shù)據(jù)直接保存到MongoDB的文檔結(jié)構(gòu)中2012-11-11
頁面向下滾動ajax獲取數(shù)據(jù)的實現(xiàn)方法(兼容手機)
下面小編就為大家?guī)硪黄撁嫦蛳聺L動ajax獲取數(shù)據(jù)的實現(xiàn)方法(兼容手機)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本文主要介紹了原生js實現(xiàn)旋轉(zhuǎn)木馬輪播圖效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS事件添加和移出的兼容寫法,結(jié)合實例形式分析了javascript針對不同瀏覽器實現(xiàn)實現(xiàn)添加與移除事件的相關技巧與使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
在上一篇文章中的（偽）Lambda模塊中使用了幾個小技巧，現(xiàn)在我就把這幾個小技巧介紹一下2010-09-09
JavaScript檢測并限制復選框選中個數(shù)的方法
這篇文章主要介紹了JavaScript檢測并限制復選框選中個數(shù)的方法,涉及javascript針對復選框的判定與運算相關技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
JavaScript實現(xiàn)樹的遍歷算法示例【廣度優(yōu)先與深度優(yōu)先】
這篇文章主要介紹了JavaScript實現(xiàn)樹的遍歷算法,結(jié)合實例形式分析了javascript針對樹結(jié)構(gòu)的廣度優(yōu)先遍歷與深度優(yōu)先遍歷實現(xiàn)方法,需要的朋友可以參考下2017-10-10