1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 <title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）-JS特效学院|JsWeb.Cn</title>
5
6 </head>
7
8 <body><!--下面是向上滚动代码-->
9
10 <div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;>
11 <div id=jsweb8_cn_top1>
12 <img src="http://jsweb8.cn/images/logo.gif">
13 <img src="http://jsweb8.cn/images/logo.gif">
14 <img src="http://jsweb8.cn/images/logo.gif">
15 <img src="http://jsweb8.cn/images/logo.gif">
16 <img src="http://jsweb8.cn/images/logo.gif">
17 <img src="http://jsweb8.cn/images/logo.gif">
18 <img src="http://jsweb8.cn/images/logo.gif">
19 <img src="http://jsweb8.cn/images/logo.gif">
20 <img src="http://jsweb8.cn/images/logo.gif">
21 </div>
22 <div id=jsweb8_cn_top2></div>
23 </div>
24 <script>
25 var speed=30
26 jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2
27 function Marquee1(){
28 //当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时
29 if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)
30 jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端
31 else{
32 jsweb8_cn_top.scrollTop++;
33 }
34 }
35 var MyMar1=setInterval(Marquee1,speed)//设置定时器
36 //鼠标移上时清除定时器达到滚动停止的目的
37 jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
38 //鼠标移开时重设定时器
39 jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
40 </script>
41
42 <!--向上滚动代码结束-->
43
44 <br>
45
46 <!--下面是向下滚动代码-->
47
48 <div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;>
49 <div id=jsweb8_cn_bottom1>
50 <img src="http://jsweb8.cn/images/logo.gif">
51 <img src="http://jsweb8.cn/images/logo.gif">
52 <img src="http://jsweb8.cn/images/logo.gif">
53 <img src="http://jsweb8.cn/images/logo.gif">
54 <img src="http://jsweb8.cn/images/logo.gif">
55 <img src="http://jsweb8.cn/images/logo.gif">
56 <img src="http://jsweb8.cn/images/logo.gif">
57 <img src="http://jsweb8.cn/images/logo.gif">
58 <img src="http://jsweb8.cn/images/logo.gif">
59 </div>
60 <div id=jsweb8_cn_bottom2></div>
61 </div>
62 <script>
63 var speed=30
64 jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
65 jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
66 function Marquee2(){
67 if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
68 jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
69 else{
70 jsweb8_cn_bottom.scrollTop--
71 }
72 }
73 var MyMar2=setInterval(Marquee2,speed)
74 jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)}
75 jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
76 </script>
77
78 <!--向下滚动代码结束-->
79
80 <br>
81
82 <!--下面是向左滚动代码-->
83
84 <div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
85 <table cellpadding="0" cellspacing="0" border="0">
86 <tr><td id="jsweb8_cn_left1" valign="top" align="center">
87 <table cellpadding="2" cellspacing="0" border="0">
88 <tr align="center">
89 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
90 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
91 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
92 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
93 <td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
94 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
95 </tr>
96 </table>
97 </td>
98 <td id="jsweb8_cn_left2" valign="top"></td>
99 </tr>
100 </table>
101 </div>
102 <script>
103 var speed=30//速度数值越大速度越慢
104 jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
105 function Marquee3(){
106 if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
107 jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
108 else{
109 jsweb8_cn_left.scrollLeft++
110 }
111 }
112 var MyMar3=setInterval(Marquee3,speed)
113 jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}
114 jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
115 </script>
116
117 <!--向左滚动代码结束-->
118
119 <br>
120
121 <!--下面是向右滚动代码-->
122
123 <div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
124 <table cellpadding="0" cellspacing="0" border="0">
125 <tr><td id="jsweb8_cn_right1" valign="top" align="center">
126 <table cellpadding="2" cellspacing="0" border="0">
127 <tr align="center">
128 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
129 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
130 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
131 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
132 <td><img src="http://jsweb8.cn/images/logo.gif"></td>
133 </tr>
134 </table>
135 </td>
136 <td id="jsweb8_cn_right2" valign="top"></td>
137 </tr>
138 </table>
139 </div>
140 <script>
141 var speed=30//速度数值越大速度越慢
142 jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
143 function Marquee4(){
144 if(jsweb8_cn_right.scrollLeft<=0)
145 jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
146 else{
147 jsweb8_cn_right.scrollLeft--
148 }
149 }
150 var MyMar4=setInterval(Marquee4,speed)
151 jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}
152 jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
153 </script>
154
155 <!--向右滚动代码结束-->
156 <p></p>
157 更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn"
158
159 target="_blank">www.jsweb8.cn</a>,转载请注明出处（JS特效学院）
160 </body>
161 </html>