jQuery实现图片上一张下一张切换功能

发布时间：2018-08-23 07:08:33 所属栏目：业界来源：站长网

导读：人人网相册和酷狗音乐网站上面当鼠标移动到图片上面，鼠标的形状会根据其在图片上的位置改变。说明：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

（编辑：核心网）

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

壹号本新款 ONE XPLAY	特斯拉前 CTO 电动汽车
华硕公布新款天选3 搭	主流显卡最新场批价曝