鼠标控制不间断图片水平左右滚动效果

时间：2022-07-02 14:51:46 编辑：袖梨来源：一聚教程网

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

鼠标控制不间断图片水平左右滚动效果
<!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>
<title>鼠标控制不间断图片水平左右滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>

<a href="https://img.111com.net/get_pic/20090908084552154.gif" class="js-smartPhoto-pc" target="_blank"><img  alt="鼠标控制不间断图片水平左右滚动效果"  onMouseOver="moveThis('left')" style="cursor:pointer" onmouseout="moveout()" src="https://img.111com.net/get_pic/20090908084552154.gif"  ></a>
<div id="demo" style="overflow:hidden;">
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td id="demo1">
        <table style="margin-left:0px" cellspacing="0" cellpadding="0" width="459" border="0">
          <tr>
            <td>
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
              <img  alt="鼠标控制不间断图片水平左右滚动效果"  src="https://img.111com.net/get_pic/20090908084559656.jpg" class="floatleft">
            </td>
          </tr>
	    </table>
      </td>
      <td id="demo2"></td>
    </tr>
  </table>
</div>
<a href="https://img.111com.net/get_pic/20090908084605554.gif" class="js-smartPhoto-pc" target="_blank"><img  alt="鼠标控制不间断图片水平左右滚动效果"  onMouseOver="moveThis('right')" style="CURSOR: pointer" onmouseout="moveout()" src="https://img.111com.net/get_pic/20090908084605554.gif"  ></a>
<script language="<a href=http://111com.net/js_a/js.html target=_blank >javascript</a>">
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function MarqueeL(){
	if(demo2.offsetWidth-demo.scrollLeft<=0)
		demo.scrollLeft-=demo1.offsetWidth;
	else
		demo.scrollLeft++;
}
function MarqueeR(){
	if(demo2.offsetWidth-demo.scrollLeft>=255)
		demo.scrollLeft+=demo1.offsetWidth;
	else
		demo.scrollLeft--;
}
var flag=0;
var MyMar;
//var MyMar=setInterval(MarqueeL,speed);
demo.onmouseover=function() {if(MyMar){clearInterval(MyMar)}}
//demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}	
function moveout(way)
{
		if(MyMar)
		{
			clearInterval(MyMar);
		}
}
function moveThis(way){ 
	if(way=='right'){ 
		flag=1;
		if(MyMar)
		{
			clearInterval(MyMar);
		}
		MyMar=setInterval(MarqueeR,speed);
	}
	else{ 
		flag=0;
		if(MyMar)
		{
			clearInterval(MyMar);
		}
		MyMar=setInterval(MarqueeL,speed);
	}	
	if(flag) demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}	
	else demo.onmouseout=function() {MyMar=setInterval(MarqueeL,speed)}
}  
</script>
</body>
</html>

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

推荐专题

最新下载

热门教程

鼠标控制不间断图片水平左右滚动效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程