jQuery实现图片上一张下一张切换成果

发布时间：2018-08-21 09:22:06 所属栏目：业界来源：站长网

导读：大家网相册和酷狗音乐网站上面当鼠标移动到图片上面，鼠标的外形会按照其在图片上的位置改变。声名：1.必要挪用Jquery。 2.这里获取鼠标在图片的位置用了个谋利的要领，配置图片的position:relative 直接行使 var positionX=e.originalEvent.x||e.origi

大家网相册和酷狗音乐网站上面当鼠标移动到图片上面，鼠标的外形会按照其在图片上的位置改变。

声名：1.必要挪用Jquery。

2.这里获取鼠标在图片的位置用了个谋利的要领，配置图片的position:relative

直接行使 var positionX=e.originalEvent.x||e.originalEvent.layerX||0; 来获取。

3. 为了利便直接在图片上添加left=http://www.veryhuo.com right=http://www.liehuo.org 为其上一张，下一张链接地点。记得给<img />套上<a href="#" ></a>

参考：1.jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张成果

2.offsetX与layerX区别

3.JS在IE和FireFox之间的区别汇总

4.clientX, pageX, offsetX,x, layerX, screenX, offsetLeft

实当代码：

<!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>上一张，下一张图片演示 Liehuo.Net</title> <script src="http://www.veryhuo.com/uploads/common/jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css"> .rootclass{ border:none;position:relative;} </style> <script type="text/javascript"> $(document).ready(function() { $(".rootclass").mousemove(function(e){ var positionX=e.originalEvent.x||e.originalEvent.layerX||0; if(positionX<=$(this).width()/2){ this.style.cursor='url("pre.cur"),auto'; $(this).attr('title','点击查察上一张（默认打开猛火首页）'); $(this).parent().attr('href',$(this).attr('left')); }else{ this.style.cursor='url("next.cur"),auto'; $(this).attr('title','点击查察下一张（默认打开猛火导航）'); $(this).parent().attr('href',$(this).attr('right')); } }); }); </script> </head> <body> <a href="#" > <img src="http://www.veryhuo.com/uploads/allimg/081220/1728258.jpg" alt="" class="rootclass" left="http://www.veryhuo.com" right="http://www.liehuo.org" /> </a> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

出处：http://dooom.cnblogs.com

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

宏光MINI GAMEBOY全面	美国初创公司Aquarian
新一代汽车芯片的设计	显示器常见背光种类盘