鼠标控制图片问鼎pg官方开元体育app官方版最新下载网站入口左右无缝滚动js特效
js图片左右无缝滚动用鼠标控制图片滚动特效，通过鼠标感应控制图片左右无缝滚动js代码效果演示，鼠标放置图片滚动代码素材 鼠标控制图片左右无缝滚动js特效js演示效果
<!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>js图片左右无缝滚动带鼠标感应效果 - bokequ.com</title><meta name="description" content="js图片滚动制作图片左右无缝滚动效果，鼠标放置容器问鼎pg官方入口开元体育app官方版最新下载网站trong>的左侧或右侧 可以控制图片滚动方向，通过鼠标感应控制图片左右无缝滚动。" /></head><body><script type="text/javascript">var dir=1;//每步移动像素，大＝快var speed=10;//循环周期（毫秒）大＝慢var MyMar=null;function Marquee(){//正常移动 var scrollbox = document.getElementById("scrollbox"); var scrollcopy = document.getElementById("scrollcopy"); if(dir>0&&(scrollcopy.offsetWidth-scrollbox.scrollLeft)<=0){ scrollbox.scrollLeft=0; } if(dir<0 &&(scrollbox.scrollLeft<=0)){ scrollbox.scrollLeft=scrollcopy.offsetWidth; } scrollbox.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 开元体育app官方版最新下载网站= 0;var _MousePY = 0;var _DivLeft = 0;var _DivRight = 0;var _AllDivWidth = 0;var _AllDivHeight = 0;function MoveDiv(e){ var obj = document.getElementById("scrollbox"); _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("scrollbox").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){ r_left(); //Move left } else if(_MousePX < _DivRight && _MousePX > pos2){ r_right(); //Move right } if(_MousePX > pos1 && _MousePX < pos2){ onmouseoverMy(); //Stop 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><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}table{empty-cells:show;border-collapse:collapse;border-spacing:0;}.titbox{font-size:18px;color:#3366cc;height:32px;overflow:hidden;width:880px;margin:20px auto;}.scroll{width:880px;color:#333333;margin:0 auto;overflow:hidden;}.scroll img{border:solid 1px #ddd;margin:0 5px;}.scroll a:hover img{border:solid 1px #990000;}</style> <h2 class="问鼎pg官方入口titbox">鼠标放置 容器的左侧或右侧 可以控制图片滚动方向哦</h2> <div class="scroll" id="scrollbox" onMouseMove="MoveDiv(event);" onMouseOut="MoveOutDiv();"> <div id="scrollcon" style="width:100%;"> <table> <tbody> <tr> <td valign="top"> <table width="100%"> <tr> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="js文字切换特效制作焦点文字带滤镜切换效果" src="images/006BNLLHgy1fmt641lwp0j30hs0qo1dt.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="js文字特效制作js文字闪烁与文字变色效果" src="images/006BNLLHgy1fmt63xfow2j31hc0u0u0x.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="js文字滚动插件制作双行关联向上文字间隙滚动" src="images/006BNLLHgy1g1ob4wl7stj30u01hc1kx.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="js树形导航菜单制作垂直js导航条特效" src="images/006BNLLHgy1g1ob4ye1wlj31c00u0b2a.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单" src="images/006BNLLHgy1g1ob4waomsj30u01hc1kx.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="flash导航条制作二级菜单子菜单的flash导航条源码" src="images/006BNLLHgy1g1ob4x19rnj31hc0u04qp.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="flash导航条制作一个鼠标滑过动画特效flash导航条源码下载" src="images/006BNLLHgy1g1eueq6x6nj30ys0mmu0x.jpg" /></a></td> <td><a href="http://www.bokequ.com/tag/jquery" target="_blank" rel="noopener"> <img height="150" width="250" alt="flash导航条制作一个鼠标滑过动画特效flash导航条源码下载" src="images/006BNLLHgy1g1ob4xa7xnj31hc0u07wh.jpg" /></a></td> </tr> </table> </td> <td><div id="scrollcopy" style="width:100%;"></div></td> </tr> </tbody> </table> </div> </div><script type="text/javascript"> document.getElementById("scrollcopy").innerHTML = document.getElementById("scrollcon").innerHTML; MyMar=setInterval(Marquee,speed);</script></body></html>
-
上一篇
-
下一篇
- 最近发表
-
- WordPress自适应高清图片主题Perimg1.2
- WordPress插件No category base移除分类目录category
- WordPress后台外观主题编辑器屏蔽&隐藏
- 优酷/爱奇艺/腾讯vip视频在线解析
- wordpress/帝国cms配置https(SSL)无法登录后台
- WordPress主题特色图片(缩略图)不显示原因
- wordpress网站换域名搬家后打不开解决方法
- css如何清除浮动clear与float
- javascript一元运算符与算术运算符
- Crypto Markets in Retreat: BTC Losses $70K, WIF Plummets 11% Daily (Market Watch)
- 随机阅读
-
- 仿新浪微博个人主页html网站模板
- SEO一些名词介绍/SEO常见术语
- web前端开发表单form/input标签
- 利用excel分析IIS服务器日志
- HTML5 WebGL 3D樱花飘落动画代码
- 纤薄机身扫地新宠：科沃斯T50 PRO，水箱版1613元国补新低，体验升级更轻松
- wordpress未能与站点联系致命错误，PHP修改被回滚
- TON Defies Market Sentiment With a Massive 23% Surge, BTC Slumps Toward $70K (Market Watch)
- 当贝X5S Plus 4K激光投影仪震撼登场：国补价3999元，真实画质触手可及
- 个人网站程序语言HTML/ASP/PHP解析
- wordpress插件Bing URL Submissions网址自动提交到必应
- 搜索引擎网址提交入口有哪些
- jQuery网页底部左侧mp3音乐播放器悬浮插件
- dedecms模板源码程序安装常见问题
- JavaScript的详细概述/什么是JavaScript
- 天猫精灵：跨设备连接领跑行业，品类覆盖引领消费新潮
- wordpress响应式瀑布流博客主题snow
- jQuery鼠标点击弹出分享按钮代码
- 虚拟主机导入MySQL出现Unknown character set:utf8mb4
- HTML5表单元input(二)
- 搜索
-
- 友情链接
-