|
Advertisement Board.在CSDN看到的项目投标的广告滚动条，用的是iframe + window.scrollBy，挺有意思的。
自己把源码做了点改进，并加了个暂停滚动的功能：
test.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>iframe scroll</title>
7 <style type="text/css">
8 iframe{margin: 0pt; width: 180px; height: 32px;}
9 </style>
10 </head>
11 <body>
12 <form id="form1">
13 <h4>Exciting Advertisement Board</h4>
14 <iframe src="iframe.html" scrolling="no" frameborder="1"></iframe>
15
16 </form>
17 </body>
18 </html>
iframe.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <style type="text/css">
7 *{margin:0;padding:0;}
8 body {background:#F2F2FC;font:normal 12px verdana,sans-serif;}
9 ul{list-style-type:none;}
10 li{width:180px;}
11 a{color:#03C;text-decoration:none;}
12 a:hover{color:#F00;text-decoration:none;}
13 </style>
14 </head>
15 <body>
16 <ul id="scrollCon" onmouseover="suspend()" onmouseout="resume()">
17 <li>Hello!</li>
18 <li><a href="aaa">I’m aaa.</a></li>
19
20 <li>Hi!</li>
21 <li><a href="bbb">I’m bbb.</a></li>
22
23 <li>How are you!</li>
24 <li><a href="ccc">I’m ccc.</a></li>
25 </ul>
26
27 <script language="javascript">
28 var con=document.getElementById("scrollCon");
29 var items=con.getElementsByTagName("li");
30 var item_count=items.length/2;
31 var line_height=items[0].offsetHeight;
32 var timer1,timer2;
33 var step=0,cstep=0;
34 var isPlayed=false;
35
36 function startScroll(){
37 timer1=setInterval("doScroll()",40);//数值越大，滚动越慢
38 }
39 function doScroll(){
40 window.scrollBy(0,2);//滚动幅度
41 step++;
42 if(step>=line_height) {
43 clearInterval(timer1);
44 step=0;
45 cstep++;
46 if(cstep>=item_count){
47 cstep=0;
48 window.scrollTo(0,0);
49 }
50 }
51 }
52 function start(){
53 if(isPlayed)return;
54 isPlayed=true;
55 timer2=setInterval("startScroll()",3000);//滚动间隔
56 }
57 function suspend(){
58 clearInterval(timer1);
59 clearInterval(timer2);
60 }
61 function resume(){
62 timer2=setInterval("startScroll()",3000);
63 }
64 function stop(){
65 isPlayed=false;
66 clearInterval(timer2);
67 }
68
69 start();
70 </script>
71 </body>
72 </html>
上一页 [1] [2] [3] |
