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; 75px; }
12 #colee ul li, #colee_bottom ul li { margin-bottom: 12px; }
13 #colee_left, #colee_right { overflow: hidden; 510px; }
14 #colee_left ul, #colee_right ul { overflow: hidden; 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;
400px;
overflow:hidden;
border-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>