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>
