Javascript无缝隙图版上下左右滚动效果

作者：简简单单 2013-10-25

提示：您可以先修改部分代码再运行

<!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>Javascript实现无缝隙上下左右滚动效果</title>
 <style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> 
 ul { list-style: none outside none; margin: 0; padding: 0; }
 ul li img { border: medium none; display: block; }
 #colee, #colee_bottom { float: left; margin-bottom: 24px; margin-right: 24px; }
 #colee_left { clear: left; margin-bottom: 24px; }
 #colee, #colee_bottom {  overflow: hidden;  }
 #colee ul li, #colee_bottom ul li { margin-bottom: 12px; }
 #colee_left, #colee_right { overflow: hidden;  }
 #colee_left ul, #colee_right ul { overflow: hidden;  }
 #colee_left ul li, #colee_right ul li { display: inline; float: left; margin-right: 12px; }
 .aab{ float:left; }
 .aab li{  float:left; line-}
 </style>
 </head>
 <body>
 
 <div style=" margin:0px auto;">
 <div id="colee">
   <div id="colee1">
     <ul>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_01.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_02.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_03.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_04.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_05.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_06.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_07.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_08.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_09.jpg" width="75" height="75" alt="" /></a></li>
     </ul>
   </div>
   <div id="colee2"></div>
 </div>
 <script type="text/javascript"> 
     var speed = 30;
     var colee2 = document.getElementById("colee2");
     var colee1 = document.getElementById("colee1");
     var colee = document.getElementById("colee");
     colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
     function Marquee1() {
         //当滚动至colee1与colee2交界时
         if (colee2.offsetTop - colee.scrollTop <= 0) {
             colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
         } else {
             colee.scrollTop++;
         }
     }
     var MyMar1 = setInterval(Marquee1, speed); //设置定时器
 //鼠标移上时清除定时器达到滚动停止的目的
     colee.onmouseover = function() {
         clearInterval(MyMar1);
     }
     //鼠标移开时重设定时器
     colee.onmouseout = function() {
         MyMar1 = setInterval(Marquee1, speed);
     }
 </script> 
  
  
 
 <div id="colee_bottom">
   <div id="colee_bottom1">
      <ul>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_01.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_02.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_03.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_04.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_05.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_06.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_07.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_08.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_09.jpg" width="75" height="75" alt="" /></a></li>
     </ul>
   </div>
   <div id="colee_bottom2"></div>
 </div>
 <script type="text/javascript"> 
     var speed = 30;
     var colee_bottom2 = document.getElementById("colee_bottom2");
     var colee_bottom1 = document.getElementById("colee_bottom1");
     var colee_bottom = document.getElementById("colee_bottom");
     colee_bottom2.innerHTML = colee_bottom1.innerHTML;
     colee_bottom.scrollTop = colee_bottom.scrollHeight;
     function Marquee2() {
         if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0) {
             colee_bottom.scrollTop += colee_bottom2.offsetHeight;
         } else {
             colee_bottom.scrollTop--;
         }
     }
     var MyMar2 = setInterval(Marquee2, speed);
     colee_bottom.onmouseover = function() {
         clearInterval(MyMar2);
     }
     colee_bottom.onmouseout = function() {
         MyMar2 = setInterval(Marquee2, speed);
     }
 </script> 
  
 
 <div id="colee_left">
   <table width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
       <td id="colee_left1"> <ul class="aab">
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_01.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_02.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_03.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_04.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_05.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_06.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_07.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_08.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_09.jpg" width="75" height="75" alt="" />这里是文字内容</a></li>
     </ul></td>
       <td id="colee_left2"></td>
     </tr>
   </table>
 </div>
 <script type="text/javascript"> 
     //使用div时，请保证colee_left2与colee_left1是在同一行上.
     var speed = 30; //速度数值越大速度越慢
     var colee_left2 = document.getElementById("colee_left2");
     var colee_left1 = document.getElementById("colee_left1");
     var colee_left = document.getElementById("colee_left");
     colee_left2.innerHTML = colee_left1.innerHTML;
     function Marquee3() {
         if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) { //offsetWidth 是对象的可见宽度
             colee_left.scrollLeft -= colee_left1.offsetWidth; //scrollWidth 是对象的实际内容的宽，不包边线宽度
         } else {
             colee_left.scrollLeft++;
         }
     }
     var MyMar3 = setInterval(Marquee3, speed);
     colee_left.onmouseover = function() {
         clearInterval(MyMar3);
     }
     colee_left.onmouseout = function() {
         MyMar3 = setInterval(Marquee3, speed);
     }
 </script> 
  
 
 <div id="colee_right">
   <table width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
       <td id="colee_right1"> <ul>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_01.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_02.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_03.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_04.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_05.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_06.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_07.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_08.jpg" width="75" height="75" alt="" /></a></li>
       <li><a href="" target="_blank" title="前端总线"><img  src="images/a_09.jpg" width="75" height="75" alt="" /></a></li>
     </ul></td>
       <td id="colee_right2"></td>
     </tr>
   </table>
 </div>
 <script type="text/javascript"> 
     var speed = 30; //速度数值越大速度越慢
     var colee_right2 = document.getElementById("colee_right2");
     var colee_right1 = document.getElementById("colee_right1");
     var colee_right = document.getElementById("colee_right");
     colee_right2.innerHTML = colee_right1.innerHTML;
     function Marquee4() {
         if (colee_right.scrollLeft <= 0) {
             colee_right.scrollLeft += colee_right2.offsetWidth;
         } else {
             colee_right.scrollLeft--;
         }
     }
     var MyMar4 = setInterval(Marquee4, speed);
     colee_right.onmouseover = function() {
         clearInterval(MyMar4);
     }
     colee_right.onmouseout = function() {
         MyMar4 = setInterval(Marquee4, speed);
     }
 </script> 
 
 </div>

</body>
 </html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

Javascript无缝隙图版上下左右滚动效果

相关文章

精彩推荐