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>
