JS圖片滾動（無縫、平滑、上下左右滾動）效果

weixin_33860553發表於2012-03-13
JS
  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>

 

 

相關文章