响应鼠标左右滚动的横向图片滚动代码

　　烈16火39网(LieHuo96.Net)网页特效：响应鼠标左右滚动的横向图片滚动代码，效果非常好。

　　介绍：

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

　　演示：

<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(/uploads/allimg/1009/scorllbg.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="/uploads/common/images/s_p6.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p3.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p6.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p7.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p6.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p9.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p6.jpg" border="0">世界自然绝美风景</a></td> <td><a href="#"><img src="/uploads/common/images/s_p2.jpg" border="0">世界自然绝美风景</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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　　　近日，有很多站长恶意采集烈，火，网（Liehuo，Net）的文章，关于此，烈火学院发表最新声明：http://www.veryhuo.com/help/mianze.html

热点

响应鼠标左右滚动的横向图片滚动代码

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

响应鼠标左右滚动的横向图片滚动代码

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展