制作时间：14:30 - 15:30
观看妙味课堂的一个视频 ： 百叶窗效果
自己动手写代码，因为没有视频中使用的move.js这个文件，所以我想到用jquery库来实现动画效果。
实现过程如下
html代码：
<body>
<ul id="ul1">
<li><div><p>111111111</p><p>222222222</p></div></li>
<li><div><p>333333333</p><p>444444444</p></div></li>
<li><div><p>555555555</p><p>666666666</p></div></li>
<li><div><p>777777777</p><p>888888888</p></div></li>
<li><div><p>999999999</p><p>000000000</p></div></li>
</ul>
</body>
css代码：
<style>
*{
padding: 0;
margin: 0;
}
ul{
margin:20px;
padding: 0;
float: left;
width: 300px;
height: auto;
border-top: 1px solid #000;
}
li{
list-style: none;
width: 100%;
height: 30px;
overflow: hidden;
line-height: 30px;
border-bottom: 1px dashed #333;
position: relative;
}
li div{
position: absolute;
top: -30px;
}
li div p{
height: 30px;
}
</style>
接下来重点就是js代码实现过程。
js代码第一版如下：
<script>
$(function(){
var $adiv = $("#ul1").find('div');
var inow = 0;
setInterval(function(){
change();
},1000);
function change(){
setInterval(function(){
$adiv.eq(inow).animate({top:"0px"},"nomal");
inow++;
},100)
}
})
</script>
注意事项
1：使用$adiv.eq(inow)；我在做的过程中一时糊涂写成$adiv[inow]， 这是在js中的写法，是DOM对象，不可为它添加animate事件。
2：消除change()中的定时器。因为如果不消除，变量inow会一直增加下去。
解决办法：设定一个定时器timer，判断是否执行到了最后一个div。如果是，则清除这个定时器。
3 ：注意两个定时器的时间设定。如果第一个设定为5000，第二个设定为1000，则动画是连续执行的，并不会执行一次停顿5秒再执行下一动画。因为在第二个定时器开着时，第一个定时器同时也在监听。一次动画执行下来正好是5秒，所以第一个定时器又开启了。
js代码第二版（消除第二个定时器）：
$(function(){
var $adiv = $("#ul1").find('div');
var inow = 0;
var timer = null;
setInterval(function(){
change();
},1000);
function change(){
timer = setInterval(function(){
if(inow==$adiv.length){
clearInterval(timer);
}else{
$adiv.eq(inow).animate({top:"0px"},"nomal");
inow++;
}
},100)
}
})
为什么说消除第二个定时器呢，是因为想要实现无限的效果，向下滚动的动画执行完后，执行向上的动画，如此循环。解决办法是添加一个布尔开关 btn。
js代码第三版：
$(function(){
var $adiv = $("#ul1").find('div');
var inow = 0;
var timer = null;
var btn = true;
setInterval(function(){
change();
},5000);
function change(){
timer = setInterval(function(){
if(inow==$adiv.length){
clearInterval(timer);
inow=0;
btn=!btn;
}else{
$adiv.eq(inow).animate({top:btn?0:'-30px'},"nomal");
inow++;
}
},100)
}
})
那至此，简单的百叶窗效果就做到这里。
网友评论