首页 > 代码库 > JQ新闻标题向上滑动

JQ新闻标题向上滑动

2024-10-20 01:49:02   209人阅读

 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>

效果图：

技术分享

 

JQ新闻标题向上滑动


联系
我们