公告滚动 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>公告滚动</title>
 6 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
 7 <script src="js/jquery.min.js"></script>
 8 </head>
 9 <body>
10 <style>
11 *{padding: 0;margin:0;border:0;}
12 .a{position: relative;overflow: hidden;height: 40px;line-height: 40px;width: 300px;}
13 #b{position: absolute;}
14 </style>
15 <div class="a">
16     <ul id="b">
17         <li><a href="#">fdafdasfd1</a></li>
18         <li><a href="#">fdafdasfd2</a></li>
19         <li><a href="#">fdsafdsafd3</a></li>
20         <li><a href="#">fdafdasfd4</a></li>
21     </ul>
22 </div>
23 
24 <script>
25 annouceFun("#b",1000);
26 function annouceFun(id,time){
27     var announceObj = $(id).find("li");
28     var announceHeight = announceObj.height();
29     if(announceObj.length>1){
30         var announceIndex = 1;
31         setInterval(function(){
32             $(id).animate({
33                 top:(-announceHeight*announceIndex)+"px"
34             },"fast");
35             if(announceIndex < announceObj.length-1){
36                 announceIndex++;
37             }else{
38                 announceIndex = 0;
39             }
40         },time)
41     }
42 }
43 
44 </script>
45 </body>
46 </html>

 

posted @ 2020-12-09 15:22  傅丹辰cds  阅读(86)  评论(0)    收藏  举报