四种JS滚动代码

1.

1 < div id = " marquees " >
2 < a href = " # " > 你可曾有过无数的梦想 < / a><br><br>
3   < a href = " # " > 却在时光的流逝里幻灭 < / a><br><br>
4   < a href = " # " > 你可曾对未来期待憧憬 < / a><br><br>
5   < a href = " # " > 却在成长的岁月中迷失 < / a><br><br>
6   < / div>
7 < script language = " JavaScript " >
8 marqueesHeight = 200 ;
9 stopscroll = false ;
10 with (marquees){
11 style.width = 0 ;
12 style.height = marqueesHeight;
13 style.overflowX = " visible " ;
14 style.overflowY = " hidden " ;
15 noWrap = true ;
16 onmouseover = new Function( " stopscroll=true " );
17 onmouseout = new Function( " stopscroll=false " );
18 }
19 document.write( ' <div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div> ' );
20
21 preTop = 0 ; currentTop = 0 ;
22
23 function init(){
24 templayer.innerHTML = "" ;
25 while (templayer.offsetHeight < marqueesHeight){
26 templayer.innerHTML += marquees.innerHTML;
27 }
28 marquees.innerHTML = templayer.innerHTML + templayer.innerHTML;
29 setInterval( " scrollUp() " , 50 );
30 }
31 document.body.onload = init;
32
33 function scrollUp(){
34 if (stopscroll == true ) return ;
35 preTop = marquees.scrollTop;
36 marquees.scrollTop += 1 ;
37 if (preTop == marquees.scrollTop){
38 marquees.scrollTop = templayer.offsetHeight - marqueesHeight;
39 marquees.scrollTop += 1 ;
40 }
41 }
42 < / script>

 

2.

1 < base href = " <a href= " http: // www.flash8.net" target="_blank">http://www.flash8.net</a>">
2 < div id = demo style = overflow:hidden;height: 100 ;width: 90 ;background:# 214984 ;color:#ffffff >
3 < div id = demo1 >
4 < img src = " /images/flash8.gif " >
5 < img src = " /images/link/flashempire.gif " >
6 < img src = " /images/linklogo/shlogo.gif " >
7 < img src = " /images/link/deskcity.gif " >
8 < img src = " /images/linklogo/5dmeng.gif " >
9 < img src = " <a href= " http: // www.blueidea.com/logo.gif" target="_blank">http://www.blueidea.com/logo.gif</a>">
10 < img src = " /images/link/flashskylogo.gif " >
11 < img src = " /images/link/5dlogo88.gif " >
12 < img src = " <a href= " http: // www.yiiboo.com/cgercn/link.gif" target="_blank">http://www.yiiboo.com/cgercn/link.gif</a>">
13 < / div>
14 < div id = demo2 >< / div>
15 < / div>
16
17
18
19 < script >
20 var speed = 30
21 demo2.innerHTML = demo1.innerHTML
22 function Marquee(){
23 if (demo2.offsetTop - demo.scrollTop <= 0 )
24 demo.scrollTop -= demo1.offsetHeight
25 else {
26 demo.scrollTop ++
27 }
28 }
29 var MyMar = setInterval(Marquee,speed)
30 demo.onmouseover = function () {clearInterval(MyMar)}
31 demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)}
32 < / script>

3.

1 < body >
2 < div style = " width:200px;height:100px;overflow:hidden " >
3 < div id = " scroll " style = " position:relative;top:0px " >
4 < table border = " 1 " >
5 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
6 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
7 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
8 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
9 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
10 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
11 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
12 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
13 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
14 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
15 < tr >< td > 111 < / td><td>222< / td >< td > 333 < / td>< / tr >
16 < / table>
17 < / div>
18 < / div>
19 < script type = " text/javascript " >
20 var obj = document.getElementById( " scroll " );
21 var scrollUnit = 1 ; // 滚动高度
22 var interval = 100 ; // 时间间隔
23 setTimeout(scroll,interval);
24 function scroll()
25 {
26 obj.style.pixelTop -= scrollUnit;
27 setTimeout(scroll,interval);
28 }
29 < / script>
30 < / body>

 

4.js滚屏代码,隔一段时间向上滚动

1
2 < html >
3 < head >
4 < meta http - equiv = " content-type " content = " text/html;charset=utf-8 " / >
5 < style type = " text/css " >
6 #icefable1 {
7 MARGIN - TOP: 2px; BACKGROUND: #494c6e; COLOR: #ffff00; LINE - HEIGHT: 26px; HEIGHT: 26px; TEXT - DECORATION: none
8 }
9 #icefable1 DIV {
10 PADDING - LEFT: 30px; BACKGROUND: url(.. / images / index / point_style_00.gif) no-repeat 12px 4px; WIDTH: 350px
11 }
12 #icefable1 A:hover {
13 COLOR: #656a82; LINE - HEIGHT: 26px
14 }
15 < / style>
16 < / head>
17 < body >
18 < DIV id = icefable1 >
19 < DIV > 欢迎访问 < a href = " <a href= " http: // webym.cn/blog" target="_blank">http://webym.cn/blog</a>" target="_blank"><a href="http://webym.cn/blog" target="_blank">http://webym.cn/blog</a></a></DIV>
20 < DIV > aidli.com / bbs地理论坛诚征版主中...< / DIV >
21 < DIV > 邮箱： yangzhy@ 163 .com < / DIV>
22 < DIV > 广告合作:QQ164890072 < / A>
23 < / DIV>
24 < / DIV>
25 < SCRIPT >
26 marqueesHeight = 26 ;
27 stopscroll = false ;
28 with (icefable1)
29 {
30 style.width = 0 ;
31 style.height = marqueesHeight;
32 style.overflowX = " visible " ;
33 style.overflowY = " hidden " ;
34 noWrap = true ;
35 onmouseover = new Function( " stopscroll=true " );
36 onmouseout = new Function( " stopscroll=false " );
37 }
38 preTop = 0 ;
39 currentTop = marqueesHeight;
40 stoptime = 0 ;
41 icefable1.innerHTML += icefable1.innerHTML;
42
43 function init_srolltext()
44 {
45 icefable1.scrollTop = 0 ;
46 setInterval( " scrollUp() " , 1 );
47 }
48 init_srolltext();
49
50 function scrollUp()
51 {
52 if (stopscroll == true ) return ;
53 currentTop += 1 ;
54 if (currentTop == marqueesHeight + 1 )
55 {
56 stoptime += 1 ;
57 currentTop -= 1 ;
58 if (stoptime == 300 )
59 {
60 currentTop = 0 ;
61 stoptime = 0 ;
62 }
63 }
64 else
65 {
66 preTop = icefable1.scrollTop;
67 icefable1.scrollTop += 1 ;
68 if (preTop == icefable1.scrollTop)
69 {
70 icefable1.scrollTop = marqueesHeight;
71 icefable1.scrollTop += 1 ;
72 }
73 }
74 }
75 init_srolltext();
76 < / SCRIPT>
77 < / body>
78 < / html>

 

转载于:https://www.cnblogs.com/wangbin/archive/2010/12/16/1907642.html