Posted in Javascript onMarch 12, 2010
贴个实现方法:
代码
<!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>无标题页</title> <script src="jquery-1.3.2.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="11.bmp" alt="" class="rootclass" left="http://www.google.cn" right="http://www.baidu.cn" /> </a> </body> </html>
说明:1.需要调用Jquery。
2.这里获取鼠标在图片的位置用了个投机的方法,设置图片的position:relative
直接使用 var positionX=e.originalEvent.x||e.originalEvent.layerX||0; 来获取。
3. 为了方便直接在图片上添加left="http://www.google.cn" right="http://www.baidu.cn" 为其上一张,下一张链接地址。记得给<img />套上<a href="#" ></a>
在线演示代码:http://demo.3water.com/js/img_left_right/jquery_img_lr.htm
打包下载地址 https://3water.com/jiaoben/25129.html
相关文章:
clientX,pageX,offsetX,x,layerX,screenX,offsetLef
JS在IE和FireFox之间常用函数的区别小结
javascript offsetX与layerX区别
jQuery 点击图片跳转上一张或下一张功能的实现代码
javascript 图片上一张下一张链接效果代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@