jQuery百叶窗翻牌效果代码
- jQuery百叶窗翻牌效果代码,其实也就是文字切换,采用了百叶窗的方式,在原理上,每隔三秒执行一次变换LI的内容,LI变换的方式,即每隔100ms,让下一个LI移动top值;所有的LI移动完毕,就清除,依次类推,实现循环切换,形似百叶窗。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery百叶窗翻牌效果代码</title> <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ var timer = true; //执行向上或向下的开关 var liindex = 0;//LI的索引 var $div = $(".byc").find("div"); //每隔三秒执行一次变换LI的内容 var set1 = setInterval(function(){ ainbyc($div); liindex = 0; timer = !timer; },3000); //LI变换的方式,即每隔100ms,让下一个LI移动top值; function ainbyc(ds){ var set2 = setInterval(function(){ //所有的LI移动完毕,就清除 if(liindex == $div.length){ clearInterval(set2); //向上 }else if(timer){ ds.eq(liindex).animate({"top":0},100); //向下 }else{ ds.eq(liindex).animate({"top":-25},100); } liindex++; },100); } }) </script> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:500px; margin:0 auto; } ul.byc{ list-style:none; } ul.byc li{ position:relative; width:180px; height:30px; overflow:hidden; border-bottom:1px #000000 dotted; } ul.byc li div{ position:absolute; top:-25px; } ul.byc li div p{ height:30px;} </style> </head> <body> <div class="box"> <ul class="byc"> <li> <div> <p>aaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbb</p> </div> </li> <li> <div> <p>cccccccccccccc</p> <p>dddddddddddddd</p> </div> </li> <li> <div> <p>eeeeeeeeeeeeee</p> <p>ffffffffffffff</p> </div> </li> <li> <div> <p>ggggggggggggg</p> <p>hhhhhhhhhhhhh</p> </div> </li> <li> <div> <p>jjjjjjjjjjjjj</p> <p>kkkkkkkkkkkkk</p> </div> </li> <li> <div> <p>llllllllllll</p> <p>mmmmmmmmmmmm</p> </div> </li> </ul> </div> </body> </html>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17