1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>JS图片滚动(无缝、平滑、上下左右滚动)效果</title>
6 <style type="text/css">
7 ul { list-style: none outside none; margin: 0; padding: 0; }
8 ul li img { border: medium none; display: block; }
9 #colee, #colee_bottom { float: left; margin-bottom: 24px; margin-right: 24px; }
10 #colee_left { clear: left; margin-bottom: 24px; }
11 #colee, #colee_bottom { height: 249px; overflow: hidden; width: 75px; }
12 #colee ul li, #colee_bottom ul li { margin-bottom: 12px; }
13 #colee_left, #colee_right { overflow: hidden; width: 510px; }
14 #colee_left ul, #colee_right ul { overflow: hidden; width: 783px; }
15 #colee_left ul li, #colee_right ul li { display: inline; float: left; margin-right: 12px; }
16 </style>
17 </head>
18 <body>
19 <!--下面是向上滚动代码-->
20 <div id="colee">
21 <div id="colee1">
22 <ul>
23 <li><a href="#"><img src="http://farm1.static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
24 <li><a href="#"><img src="http://farm1.static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
25 <li><a href="#"><img src="http://farm1.static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
26 <li><a href="#"><img src="http://farm1.static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
27 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
28 <li><a href="#"><img src="http://farm1.static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
29 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
30 <li><a href="#"><img src="http://farm1.static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
31 <li><a href="#"><img src="http://farm1.static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
32 </ul>
33 </div>
34 <div id="colee2"></div>
35 </div>
36 <script type="text/javascript">
37 var speed = 30;
38 var colee2 = document.getElementById("colee2");
39 var colee1 = document.getElementById("colee1");
40 var colee = document.getElementById("colee");
41 colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
42 function Marquee1() {
43 //当滚动至colee1与colee2交界时
44 if (colee2.offsetTop - colee.scrollTop <= 0) {
45 colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
46 } else {
47 colee.scrollTop++;
48 }
49 }
50 var MyMar1 = setInterval(Marquee1, speed); //设置定时器
51 //鼠标移上时清除定时器达到滚动停止的目的
52 colee.onmouseover = function() {
53 clearInterval(MyMar1);
54 }
55 //鼠标移开时重设定时器
56 colee.onmouseout = function() {
57 MyMar1 = setInterval(Marquee1, speed);
58 }
59 </script>
60 <!--向上滚动代码结束-->
61
62 <!--下面是向下滚动代码-->
63 <div id="colee_bottom">
64 <div id="colee_bottom1">
65 <ul>
66 <li><a href="#"><img src="http://farm1.static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
67 <li><a href="#"><img src="http://farm1.static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
68 <li><a href="#"><img src="http://farm1.static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
69 <li><a href="#"><img src="http://farm1.static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
70 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
71 <li><a href="#"><img src="http://farm1.static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
72 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
73 <li><a href="#"><img src="http://farm1.static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
74 <li><a href="#"><img src="http://farm1.static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
75 </ul>
76 </div>
77 <div id="colee_bottom2"></div>
78 </div>
79 <script type="text/javascript">
80 var speed = 30;
81 var colee_bottom2 = document.getElementById("colee_bottom2");
82 var colee_bottom1 = document.getElementById("colee_bottom1");
83 var colee_bottom = document.getElementById("colee_bottom");
84 colee_bottom2.innerHTML = colee_bottom1.innerHTML;
85 colee_bottom.scrollTop = colee_bottom.scrollHeight;
86 function Marquee2() {
87 if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0) {
88 colee_bottom.scrollTop += colee_bottom2.offsetHeight;
89 } else {
90 colee_bottom.scrollTop--;
91 }
92 }
93 var MyMar2 = setInterval(Marquee2, speed);
94 colee_bottom.onmouseover = function() {
95 clearInterval(MyMar2);
96 }
97 colee_bottom.onmouseout = function() {
98 MyMar2 = setInterval(Marquee2, speed);
99 }
100 </script>
101 <!--向下滚动代码结束-->
102 <!--下面是向左滚动代码-->
103 <div id="colee_left">
104 <table width="100%" border="0" cellpadding="0" cellspacing="0">
105 <tr>
106 <td id="colee_left1"><ul>
107 <li><a href="#"><img src="http://farm1.static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
108 <li><a href="#"><img src="http://farm1.static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
109 <li><a href="#"><img src="http://farm1.static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
110 <li><a href="#"><img src="http://farm1.static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
111 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
112 <li><a href="#"><img src="http://farm1.static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
113 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
114 <li><a href="#"><img src="http://farm1.static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
115 <li><a href="#"><img src="http://farm1.static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
116 </ul></td>
117 <td id="colee_left2"></td>
118 </tr>
119 </table>
120 </div>
121 <script type="text/javascript">
122 //使用div时,请保证colee_left2与colee_left1是在同一行上.
123 var speed = 30; //速度数值越大速度越慢
124 var colee_left2 = document.getElementById("colee_left2");
125 var colee_left1 = document.getElementById("colee_left1");
126 var colee_left = document.getElementById("colee_left");
127 colee_left2.innerHTML = colee_left1.innerHTML;
128 function Marquee3() {
129 if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) { //offsetWidth 是对象的可见宽度
130 colee_left.scrollLeft -= colee_left1.offsetWidth; //scrollWidth 是对象的实际内容的宽,不包边线宽度
131 } else {
132 colee_left.scrollLeft++;
133 }
134 }
135 var MyMar3 = setInterval(Marquee3, speed);
136 colee_left.onmouseover = function() {
137 clearInterval(MyMar3);
138 }
139 colee_left.onmouseout = function() {
140 MyMar3 = setInterval(Marquee3, speed);
141 }
142 </script>
143 <!--向左滚动代码结束-->
144 <!--下面是向右滚动代码-->
145 <div id="colee_right">
146 <table width="100%" border="0" cellpadding="0" cellspacing="0">
147 <tr>
148 <td id="colee_right1"><ul>
149 <li><a href="#"><img src="http://farm1.static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
150 <li><a href="#"><img src="http://farm1.static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
151 <li><a href="#"><img src="http://farm1.static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
152 <li><a href="#"><img src="http://farm1.static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
153 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
154 <li><a href="#"><img src="http://farm1.static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
155 <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
156 <li><a href="#"><img src="http://farm1.static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
157 <li><a href="#"><img src="http://farm1.static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
158 </ul></td>
159 <td id="colee_right2"></td>
160 </tr>
161 </table>
162 </div>
163 <script type="text/javascript">
164 var speed = 30; //速度数值越大速度越慢
165 var colee_right2 = document.getElementById("colee_right2");
166 var colee_right1 = document.getElementById("colee_right1");
167 var colee_right = document.getElementById("colee_right");
168 colee_right2.innerHTML = colee_right1.innerHTML;
169 function Marquee4() {
170 if (colee_right.scrollLeft <= 0) {
171 colee_right.scrollLeft += colee_right2.offsetWidth;
172 } else {
173 colee_right.scrollLeft--;
174 }
175 }
176 var MyMar4 = setInterval(Marquee4, speed);
177 colee_right.onmouseover = function() {
178 clearInterval(MyMar4);
179 }
180 colee_right.onmouseout = function() {
181 MyMar4 = setInterval(Marquee4, speed);
182 }
183 </script>
184 <!--向右滚动代码结束-->
185 </body>
186 </html>
纯JS无间隙文字向上滚动代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>体验盒子 - UEDBOX.COM</title> </head> <body> <div style="height:80px; position:relative; overflow:hidden;"> <div id="rollText" style="font-size:12px;line-height:20px;"> <ul> <li><a href="">◇ 无间隙文字向上滚动</a></li> <li><a href="">◇ 无间隙文字向上滚动</a></li> <li><a href="">◇ 无间隙文字向上滚动</a></li> <li><a href="">◇ 无间隙文字向上滚动</a></li> <li><a href="">◇ 无间隙文字向上滚动</a></li> <li><a href="">◇ 无间隙文字向上滚动</a></li> <li><a href="">◇ 无间隙文字向上滚动</a></li> </ul> </div> </div> <script type="text/javascript"> var textDiv = document.getElementById("rollText"); var textList = textDiv.getElementsByTagName("a"); if(textList.length > 2){ var textDat = textDiv.innerHTML; var br = textDat.toLowerCase().indexOf("<li",textDat.toLowerCase().indexOf("<li")+3); textDiv.innerHTML = textDat+textDat+textDat.substr(0,br); textDiv.style.cssText = "position:absolute; top:0"; var textDatH = textDiv.offsetHeight;MaxRoll(); } var minTime,maxTime,divTop,newTop=0; function MinRoll(){ newTop++; if(newTop<=divTop+80){ textDiv.style.top = "-" + newTop + "px"; }else{ clearInterval(minTime); maxTime = setTimeout(MaxRoll,100); } } function MaxRoll(){ divTop = Math.abs(parseInt(textDiv.style.top)); if(divTop>=0 && divTop<textDatH-80){ minTime = setInterval(MinRoll,80); }else{ textDiv.style.top = 0;divTop = 0;newTop=0;MaxRoll(); } } </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>javascript </title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <style type="text/css"> #test{ height:100px; width:400px; overflow:hidden; border-width:1px; border-style:solid; margin:0 auto; background-color:yellow; } </style> </head> <body> <div id="test"> <a href="#">我用的脚本语言是javascript</a><br/> <a href="#">我用的后台开发语言是PHP</a><br/> <a href="#">我用的javascript框架是jQuery</a><br/> <a href="#">我用的PHP框架是Yii</a><br/> <a href="#">层叠样式表语言是CSS</a><br/> <a href="#">我喜欢的博客开发框架是wordpress</a><br/> <a href="#">web需要统一的标准</a><br/> <a href="#">SEO优化是很重要的</a><br/> <a href="#">我正在研习UI设计</a><br/> <a href="#">web测试是一个严谨的模块</a><br/> <a href="#">我用的开发工具是Editplus,哈哈</a><br/> </div> <script type="text/javascript"> var speed=60; var doc=document.getElementById("test"); var mymar=setInterval(Marquee,speed); doc.onmouseover=function(){clearInterval(mymar);} doc.onmouseout=function(){mymar=setInterval(Marquee,speed);} function Marquee() { if(doc.scrollTop==doc.offsetHeight) doc.scrollTop=0; else doc.scrollTop++; } </script> </body> </html>