1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{margin:0;padding:0;}
8 #hd{width:250px;height:30px;background:gold;position:relative;overflow:hidden;}
9 #hd ul{position:absolute;top:0;left:0;}
10 #hd ul li{list-style:none;line-height:30px;height:30px;width:250px;}
11 </style>
12 <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script>
13 <script type="text/javascript">
14 $(function(){
15 //大总管变量
16 var c=0;
17 setInterval(function(){
18 c++;
19 if(c==5){
20 //让ul做一个瞬间变化
21 $("#hd ul").css({‘top‘:‘0‘});
22 c=1;
23 }
24 //计算ul应该到达的top值
25 var t=c*-30;
26 //让Ul滑动上去
27 $("#hd ul").animate({"top":t+"px"},500);
28 },1000)
29 })
30 </script>
31 </head>
32 <body>
33 <div id="hd">
34 <ul>
35 <li style="background:gold;">梦入江南烟水路，</li>
36 <li style="background:green;">行尽江南，不与离人遇。</li>
37 <li style="background:blue;">睡里消魂无说处，觉来惆怅消魂误。</li>
38 <li style="background:red;">歌筵畔，先安簟枕，容我醉时眠。</li>
39 <li style="background:gold;">梦入江南烟水路，</li>
40 </ul>
41 </div>
42 </body>
43 </html>
效果图：
时间： 2024-10-30 06:01:42