利用move.js库实现快门特效

今天我们操作的是带快门效果的页面特效。好了，现在我们直接进入最终效果。Demo做得有点低，但效果都在那里

这是html和css代码：想法是在每个li中放几个P，并通过调整translatY Y来控制它。

style * { padd : 0；margin : 0；list-style:无；} # bai { width: 400pxheight: auto向左浮动：左边距left:20px自动；} Li { text-align : center；宽度： 100%；高度： 50px；线高： 50px；边框-bottom: 1px虚线# 000；相对位置：飞越：隐藏；} div . box { width : 100%；高度： 50px；绝对位置：top :-50px；} p { height: 50px}/style/head body ul id=' Bai ' Li div class=' box a1 ' P 111111111111/P P 22222222222/P/div/Li div class=' box a2 ' P 3333333333333333/P P P P 444444444444444444/P/div/Li div class=' box a3 ' P 5555555555

脚本src='http:js库/move . min . js '/脚本

导入这个，这个插件怎么用？细节我就不说了，但是你看这里。这篇文章相当不错。关键是move()中替换的对象和jquery $取DOM节点对象是一样的。这里有一些简单的方法

移动('。正方形')。到(500，200)。旋转(180)。比例尺. 5。设置('背景色'，' #FF0551 ')。set('边框颜色'，'黑色')。持续时间(' 3s ')。歪斜(50，-10)。然后()。设置(“不透明度”，0)。持续时间(' 0.3s ')。比例(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) }函数更改(){ timer=setInterval(function(){ if(num==5){ clearInterval(timer)；num=1；tet=！tet} else if(Tet==false){ move(# Bai。一个“num”)。y(50)。end()；/*这里使用是move中的translateY方法，简称y()*/num；} else { move(# Bai。一个“num”)。y(0)。end()；数量；} }，100)}} /script是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！