javascript 图片上一张下一张链接效果代码

贴个实现方法：代码复制代码代码如下: <!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.jb51.net/js/img_left_right/jquery_img_lr.htm打包下载地址 http://www.jb51.net/jiaoben/25129.html 相关文章:clientX,pageX,offsetX,x,layerX,screenX,offsetLef JS在IE和FireFox之间常用函数的区别小结 javascript offsetX与layerX区别 jQuery 点击图片跳转上一张或下一张功能的实现代码

　　推荐阅读

　　JavaScript 嵌套函数指向this对象错误的解决方法

先看一段嵌套了两层function的JavaScript代码：复制代码代码如下: var me = { name : 'Jimbor', blog : 'http://jmedia.cn/', sayMyName : function(){ var pre = 'My name is: '; function displayName(){ aler>>>详细阅读

本文标题：javascript 图片上一张下一张链接效果代码

地址：http://www.17bianji.com/kaifa2/JS/26893.html

1/2 1