鼠标移动图片左右连续不断滚动

技术文章

鼠标移动图片左右连续不断滚动

时间：2011-09-01 点击：1813

<table width=800 border=0 cellpadding=0 cellspacing=0>                                                                                                          
 <tr>
  <td id="" width="50" bgcolor="#999999"><div id="Leftmove" style="width:50px; ">  <a href="" onMouseOver="MoveLeft();" onMouseOut="StopLeft();"> < </a></div> </td>
 
 <td>                                                                                                                                                                                         
  <div id=divcom style=overflow:hidden;height:120px;width:699px;color:#ff0000><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=divcom1 valign=top>
  <table border=0 cellpadding=0 cellspacing=0 width=699>
  <tr><td><img border=0 src="http://www.it214.net/picture/133/01.jpg" width=150 height=100 hspace=22><br><center><b>说明一</b></center></td>
  <td width=30></td>
  <td><img border=0 src="http://www.it214.net/picture/133/02.jpg" width=150 height=100  hspace=22><br><center><b>说明二</b></center></td>
  <td width=30></td>
  <td><img border=0 src="http://www.it214.net/picture/133/03.jpg" width=150 height=100  hspace=22><br><center><b>说明三</b></center></td>
  <td><img border=0 src="http://www.it214.net/picture/133/04.jpg" width=150 height=100  hspace=22><br><center><b>说明四</b></center></td>
  <td width=30></td>
  <td><img border=0 src="http://www.it214.net/picture/133/05.jpg" width=150 height=100  hspace=22><br><center><b>说明五</b></center></td>
  </tr>
  </table>
 </td><td id=divcom2 valign=top></td></tr></table></div>
 </td>
 
  <td id="" width="50" bgcolor="#999999"><div id="Rightmove" style="width:50px; ">  <a href="" onMouseOver="MoveRight();" onMouseOut="StopRight();"> > </a> </div> </td>
 
 </tr>                                                                                                                                                                                                                            
 </table>

<script>
var speed=10//速度数值越大速度越慢
divcom2.innerHTML=divcom1.innerHTML
function MarqueeL()
{
  if(divcom2.offsetWidth-divcom.scrollLeft<=0)
  divcom.scrollLeft-=divcom1.offsetWidth
  else{
  divcom.scrollLeft++
  }
}
  
//divcom2.innerHTML=divcom1.innerHTML 
function MarqueeR()
{ 
  if(divcom.scrollLeft<=0) 
  divcom.scrollLeft+=divcom2.offsetWidth 
  else{ 
  divcom.scrollLeft-- 
  } 
}

var MyMar,MyMar1;

function MoveLeft()
 {
    MyMar=setInterval(MarqueeL,speed);
 }
   
 function MoveRight()
 {
    MyMar1=setInterval(MarqueeR,speed);
 }
  
  
 function StopLeft()
 {
	clearInterval(MyMar);
	clearInterval(MyMar1);
 }
  
 function StopRight()
 {
	clearInterval(MyMar);
	clearInterval(MyMar1);
 }
 
   
  
  </script>

复制Input内容代码

多个层点击展开和关闭

js+css二级下拉菜单

MM_jumpMenu函数跳转菜单

网页添加视频详细代码

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：

© Copyright 2012 上海网络 All Rights Reserved