一、要结合布局才能形成百叶窗的效果
二、开启两个定时器，第一个定时器控制的是百叶窗整体一次上翻，一次下翻；另一个控制百叶窗中的各页逐次翻转，形成层次效果。否则就成了普通的滚动广告的效果了
本实现借助于自己实现的base.js和tool.js 。重点是利用了其中的animate函数
1.页面布局代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试页面</title> <style> *{margin:0; padding:0; } ul{300px;} ul>li{list-style: none;height:30px; overflow: hidden;border-bottom: 1px dashed #000;} li>div{margin:0; padding:0;position:relative;top:0;} ul p{height:30px;line-height: 30px;} </style> </head> <body> <ul > <li> <div> <p>11111111111111111</p> <p>22222222222222222</p> </div> </li> <li> <div> <p>333333333333333333</p> <p>444444444444444444</p> </div> </li> <li> <div> <p>5555555555555555555</p> <p>6666666666666666666</p> </div> </li> <li> <div> <p>7777777777777777777</p> <p>8888888888888888888</p> </div> </li> <li> <div> <p>99999999999999999999</p> <p>00000000000000000000</p> </div> </li> </ul> <script src="./commonJs/tool.js"></script> <script src="./commonJs/base.js"></script> <script src="./usualEffects/js/baiyechuang.js"></script> </body> </html>
2.相关js代码
/* * 尝试实现百叶窗效果 */ //需要两个定时器 $(function() { var oUl = document.getElementsByTagName('ul')[0]; showBaiye(oUl); function showBaiye(oUl) { var divs = oUl.getElementsByTagName('div'); var flag = true; var iNow = 0; var timer; //每4s百叶窗整体翻动一次，一次上翻，一次下凡 setInterval(function() { //如果不开定时器的话,就没有层次的效果了,就是普通轮播图的效果 // for (var i = 0; i < divs.length; i++) { // $(divs[i]).animate({ 'top': '-30px' }, null, 100); // }; //每隔300ms每一个百叶逐个翻动，形成层次效果 timer = setInterval(changeItem, 300); flag=!flag; }, 4000); function changeItem() { var endValue = flag ? '-30px' : '0'; $(divs[iNow]).animate({ 'top': endValue }, null, 100); iNow++; if (iNow == divs.length) { iNow = 0; clearInterval(timer); } } } });