js实现新闻滚动实例

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>test</title>
 5 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 6 
 7 <style type="text/css">
 8 *{
 9     padding:0;
10     margin:0;
11     border:none;
12 }
13 #news{
14     width:300px;
15     height:100px;
16     margin:20px auto;
17     background-color:rgb(236, 231, 159);
18     border:#039 solid 1px;
19     overflow:hidden;/*这里必须设置哦，否则滚动会消失的，如果设置为scroll，更容易明白原理*/
20 }
21 #news li{
22     line-height:30px;
23 }
24 </style>
25 </head>
26 <body>
27 <div id="news" onmouseover="tz()" onmouseout="ks()">
28 <ul id="p1">
29 <li><a href="">1这是测试新闻滚动效果</a></li>
30 <li><a href="">2这是测试新闻滚动效果</a></li>
31 <li><a href="">3这是测试新闻滚动效果</a></li>
32 <li><a href="">4这是测试新闻滚动效果</a></li>
33 <li><a href="">5这是测试新闻滚动效果</a></li>
34 <li><a href="">6这是测试新闻滚动效果</a></li>
35 <li><a href="">7这是测试新闻滚动效果</a></li>
36 <li><a href="">8这是测试新闻滚动效果</a></li>
37 </ul>
38 <ul id="p2">
39 </ul>
40 </div>
41 <script type="text/javascript">
42 var n=document.getElementById("news");
43 var p1=document.getElementById("p1");
44 var p2=document.getElementById("p2");
45 p2.innerHTML=p1.innerHTML;
46 //alert(n.offsetHeight+" 1  "+p1.offsetHeight);
47 var f=function(){
48     n.scrollTop++;
49     if(n.scrollTop>=p1.offsetHeight){
50         //alert(n.scrollTop+" 1  "+p1.offsetHeight);
51         n.scrollTop=0;
52     }
53 }
54 var i=setInterval(f,20);
55 var tz=function(){
56     clearInterval(i);
57 }
58 var ks=function(){
59     i=setInterval(f,20);
60 }
61 </script>
62 </body>
63 </html>
请注意：有jQuery的封装函数
知识点：
js实现新闻滚动实例

猜你喜欢
