标签：
参考妙味课堂的JS视频实现的一个百叶窗效果，具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百叶窗效果</title> <style> body{background-color: #95e1e6;} *{margin: 0;padding: 0;} .box{width: 300px;height: auto;float: left;border-top: 1px solid #000;margin: 20px;} .box li{width: 100%;height: 30px;overflow: hidden;position: relative;border-bottom: 1px dashed #333;line-height: 30px;} .box li div{position: absolute;top: -30px;left: 0;} .box li div p{height: 30px;} </style> </head> <body> <ul class="box" id="box1"> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> </ul> <ul class="box" id="box2"> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> <li> <div> <p>百叶窗效果</p> <p>百叶窗效果</p> </div> </li> </ul> <script src="http://s.lamahui.com/jquery/jquery-2.1.1.min.js"></script> <script> $(function () { var box1 = $(‘#box1‘), box2 = $(‘#box2‘), timeCh = 4000; // 变化时长 toShow(box1); setTimeout(function () { toShow(box2); },timeCh/2); function toShow(obj) { var timer = null, iNow = 0, beChange = true, aDiv = obj.find(‘div‘); setInterval(function () { toChange(); },timeCh); function toChange() { timer = setInterval(function () { if (iNow === aDiv.length) { clearInterval(timer); iNow = 0; beChange = !beChange; } else { aDiv.eq(iNow).stop().animate({ ‘top‘ : beChange ? ‘0‘ : ‘-30px‘ }) iNow++; } },100); } } }); </script> </body> </html>
有Bug，待完善。
标签：
原文地址：http://www.cnblogs.com/baixc/p/4240468.html
