图片无缝无间隙滚动代码 DIV+script

1. 先了解一下对象的几个的属性：
3. innerHTML:设置或获取位于对象起始和结束标签内的 HTML
5. scrollHeight: 获取对象的滚动高度。
7. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
9. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
11. scrollWidth:获取对象的滚动宽度
13. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
15. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
17. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
19. offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
21. 图片上无缝滚动
22. <style type="text/css">
23. <!--
24. #demo {
25. background: #FFF;
26. overflow:hidden;
27. border: 1px dashed #CCC;
28. height: 100px;
29. text-align: center;
30. float: left;
31. }
32. #demo img {
33. border: 3px solid #F2F2F2;
34. display: block;
35. }
36. -->
37. </style>
38. 向上滚动
39. <div id="demo">
40. <div id="demo1">
41. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
42. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
43. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
44. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
45. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
46. </div>
47. <div id="demo2"></div>
48. </div>
49. <script>
50. <!--
51. var speed=10; //数字越大速度越慢
52. var tab=document.getElementById("demo");
53. var tab1=document.getElementById("demo1");
54. var tab2=document.getElementById("demo2");
55. tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
56. function Marquee(){
57. if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与 demo2交界时
58. tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
59. else{
60. tab.scrollTop++
61. }
62. }
63. var MyMar=setInterval(Marquee,speed);
64. tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
65. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
66. -->
67. </script>
71. 图片下无缝滚动
72. <style type="text/css">
73. <!--
74. #demo {
75. background: #FFF;
76. overflow:hidden;
77. border: 1px dashed #CCC;
78. height: 100px;
79. text-align: center;
80. float: left;
81. }
82. #demo img {
83. border: 3px solid #F2F2F2;
84. display: block;
85. }
86. -->
87. </style>
88. 向下滚动
89. <div id="demo">
90. <div id="demo1">
91. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
92. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
93. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
94. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
95. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
96. </div>
97. <div id="demo2"></div>
98. </div>
99. <script>
100. <!--
101. var speed=10; //数字越大速度越慢
102. var tab=document.getElementById("demo");
103. var tab1=document.getElementById("demo1");
104. var tab2=document.getElementById("demo2");
105. tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
106. tab.scrollTop=tab.scrollHeight
107. function Marquee(){
108. if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与 demo2交界时
109. tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
110. else{
111. tab.scrollTop--
112. }
113. }
114. var MyMar=setInterval(Marquee,speed);
115. tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
116. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
117. -->
118. </script>
123. 图片左无缝滚动
124. <style type="text/css">
125. <!--
126. #demo {
127. background: #FFF;
128. overflow:hidden;
129. border: 1px dashed #CCC;
130. 500px;
131. }
132. #demo img {
133. border: 3px solid #F2F2F2;
134. }
135. #indemo {
136. float: left;
137. 800%;
138. }
139. #demo1 {
140. float: left;
141. }
142. #demo2 {
143. float: left;
144. }
145. -->
146. </style>
147. 向左滚动
148. <div id="demo">
149. <div id="indemo">
150. <div id="demo1">
151. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
152. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
153. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
154. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
155. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
156. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
157. </div>
158. <div id="demo2"></div>
159. </div>
160. </div>
161. <script>
162. <!--
163. var speed=10; //数字越大速度越慢
164. var tab=document.getElementById("demo");
165. var tab1=document.getElementById("demo1");
166. var tab2=document.getElementById("demo2");
167. tab2.innerHTML=tab1.innerHTML;
168. function Marquee(){
169. if(tab2.offsetWidth-tab.scrollLeft<=0)
170. tab.scrollLeft-=tab1.offsetWidth
171. else{
172. tab.scrollLeft++;
173. }
174. }
175. var MyMar=setInterval(Marquee,speed);
176. tab.onmouseover=function() {clearInterval(MyMar)};
177. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
178. -->
179. </script>
183. 图片右无缝滚动
184. <style type="text/css">
185. <!--
186. #demo {
187. background: #FFF;
188. overflow:hidden;
189. border: 1px dashed #CCC;
190. 500px;
191. }
192. #demo img {
193. border: 3px solid #F2F2F2;
194. }
195. #indemo {
196. float: left;
197. 800%;
198. }
199. #demo1 {
200. float: left;
201. }
202. #demo2 {
203. float: left;
204. }
205. -->
206. </style>
207. 向右滚动
208. <div id="demo">
209. <div id="indemo">
210. <div id="demo1">
211. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
212. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
213. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
214. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
215. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
216. <a href="#"><img src="http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a>
217. </div>
218. <div id="demo2"></div>
219. </div>
220. </div>
221. <script>
222. <!--
223. var speed=10; //数字越大速度越慢
224. var tab=document.getElementById("demo");
225. var tab1=document.getElementById("demo1");
226. var tab2=document.getElementById("demo2");
227. tab2.innerHTML=tab1.innerHTML;
228. function Marquee(){
229. if(tab.scrollLeft<=0)
230. tab.scrollLeft+=tab2.offsetWidth
231. else{
232. tab.scrollLeft--
233. }
234. }
235. var MyMar=setInterval(Marquee,speed);
236. tab.onmouseover=function() {clearInterval(MyMar)};
237. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
238. -->
239. </script>