鼠标控制左右滚动的横向图片滚动代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>鼠标控制左右滚动的横向图片滚动代码</title>
<style>
.ny2010{ width:950px; height:177px; margin:0 auto; background:url(//ku.shouce.ren/files/images/201601/56a33cdfa5078.jpg) 0 0 no-repeat;}
.ny2010 a{ text-decoration:none; color:#333333; font-size:12px;}
.ny2010 td img{ width:120px; height:90px; display:block; margin:0 5px 2px 0; padding:1px; border:1px solid #CCCCCC;}
.ny2010 td p{ margin:0 5px; padding:0; line-height:19px; font-size:14px; font-weight:bold;}
.ny2010 td p span{ display:block; font-size:12px; font-weight:normal; color:#AE091B;}
</style>
</head>

<body>
<script>
  var dir=1;//每步移动像素，大＝快
  var speed=10;//循环周期（毫秒）大＝慢
  var MyMar=null;
  function Marquee(){//正常移动
   var demo = document.getElementById("demo");
   var demo2 = document.getElementById("demo2");
   if (dir>0  && (demo2.offsetWidth-demo.scrollLeft)<=0)
   {
    demo.scrollLeft=0;
   }
   if (dir<0 &&(demo.scrollLeft<=0))
   {
    demo.scrollLeft=demo2.offsetWidth;
   }
   demo.scrollLeft+=dir;
  }
  function onmouseoverMy() {
   window.clearInterval(MyMar);
  }//暂停移动
  function onmouseoutMy() {
   MyMar=setInterval(Marquee,speed);
  }//继续移动
  function r_left()
  {
   if (dir==-1)
    dir=1;
  }//换向左移
  function r_right()
  {
   if (dir==1)
    dir=-1;
  }//换向右移
 
  function IsIE()
  {
   var browser=navigator.appName
   if ((browser=="Netscape"))
   {
    return false;
   }
   else if(browser=="Microsoft Internet Explorer")
   {
    return true;
   }
   else
   {
    return null;
   }
  }
  
  var _IsIE = IsIE();
  var _MousePX = 0;
  var _MousePY = 0;
  var _DivLeft = 0;
  var _DivRight = 0;
  var _AllDivWidth = 0;
  var _AllDivHeight = 0;
  function MoveDiv(e){
   var obj = document.getElementById("demo");
     _MousePX = _IsIE ? (document.body.scrollLeft + event.clientX) : e.pageX;
    _MousePY = _IsIE ? (document.body.scrollTop + event.clientY) : e.pageY;
   //Opera Browser Can Support ''window.event'' and ''e.pageX''
   var obj1 = null;
   if(obj.getBoundingClientRect)
   {
    //IE
    obj1 = document.getElementById("demo").getBoundingClientRect();
    _DivLeft = obj1.left;
    _DivRight = obj1.right;
    _AllDivWidth = _DivRight - _DivLeft;
   }
   else if(document.getBoxObjectFor)
   {
    //FireFox
    obj1 = document.getBoxObjectFor(obj); 
    var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;
    _DivLeft = parseInt(obj1.x) - parseInt(borderwidth);
    _AllDivWidth = Cut_Px(obj.style.width);
    _DivRight = _DivLeft + _AllDivWidth;
   }
   else
   {
    //Other Browser(Opera)
    _DivLeft = obj.offsetLeft;
    _AllDivWidth = Cut_Px(obj.style.width);
    var parent = obj.offsetParent;
    if(parent != obj)
    {
     while (parent) {  
      _DivLeft += parent.offsetLeft; 
      parent = parent.offsetParent;
     }
    }
    _DivRight = _DivLeft + _AllDivWidth;
   }
 
   var pos1,pos2;
   pos1 = parseInt(_AllDivWidth * 0.4) + _DivLeft;
   pos2 = parseInt(_AllDivWidth * 0.6) + _DivLeft;
 
   if(_MousePX > _DivLeft && _MousePX < _DivRight)
   {
    if(_MousePX > _DivLeft && _MousePX < pos1)//Move left
    {
     r_left();
    }
    else if(_MousePX < _DivRight && _MousePX > pos2)//Move right
    {
     r_right();
    }
	
    if(_MousePX > pos1 && _MousePX < pos2)//Stop
    {
     onmouseoverMy();
     MyMar=null;
    }else if(_MousePX < pos1 || _MousePX > pos2)
    {
     if(MyMar==null)
     {
      MyMar=setInterval(Marquee,speed);
     }
    }
   }
  }
 
  function Cut_Px(cswidth)
  {
   cswidth = cswidth.toLowerCase();
   if(cswidth.indexOf("px") != -1)
   {
    cswidth.replace("px","");
    cswidth = parseInt(cswidth);
   }
   return cswidth;
  }
 
  function MoveOutDiv()
  {
   if(MyMar == null)
   {
    MyMar=setInterval(Marquee,speed);
   }
  }

</script>
<div class="ny2010">
	<div id="demo" style="overflow:hidden; width:720px; color:#333333; height:140px; margin:20px 40px 0 0; display:inline; float:right;" onMouseMove="MoveDiv(event);" onMouseOut="MoveOutDiv();">
    <div id="demo1" style="width:100%;">
        <table cellspacing=0 cellpadding=0>
             <tbody>
                 <tr valign=top>
                    <td valign=top nowrap>
						<table>
							<tr>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce3102fe.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce3bf857.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce3102fe.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce6a35ed.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce3102fe.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce840506.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce3102fe.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
								<td><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a33ce9913b7.jpg" border="0"><p>世界自然<span>绝美风景</span></p></a></td>
							</tr>
						</table>
					 </td>
					<td width="0">
					<div id="demo2" style="width:100%;"></div>
					</td>
				 </tr>
			 </tbody>
		</table>
      </div>
	  </div>
</div>
<script type="text/javascript">
 document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
 MyMar=setInterval(Marquee,speed);
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

鼠标控制左右滚动的横向图片滚动代码

分类

图片代码

描述

鼠标控制左右滚动的横向图片滚动代码，只要你把鼠标放到图片组的左端或右端，图片就会自动感应，然后改变滚动方向，比如，鼠标放左边后，图片会向左滚，放右边则向右滚，智能化。