javascript 图片上一张下一张链接效果代码
2010-03-12 00:00
375 查看
贴个实现方法:
代码
说明: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 点击图片跳转上一张或下一张功能的实现代码
代码
<!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 点击图片跳转上一张或下一张功能的实现代码
相关文章推荐
- 多浏览器兼容的qq图片轮换效果javascript代码
- 带图片闪光效果的向上滚动友情链接代码
- 图片 上一张 下一张 链接效果
- javascript 图片轮换显示效果代码
- 总结【代码重构】:Backbone.js做一个点击链接,跳过加载图片后即可跳转到效果图片的例子
- 如何在一张图片上添加多个链接 ,如何利用js做出靠右侧浮动菜单栏的效果
- 用javascript实现旋转图片效果的代码
- 一个不错的,JavaScript代码,显示首页图片幻灯片效果
- 一个简单的javascript图片放大效果代码
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- JavaScript图片水平淡入淡出切换效果代码
- javascript图片渐显效果代码
- javascript实现的鼠标链接提示效果生成器代码
- JavaScript实现图片的滑动切换效果 的Js代码
- 一个简单的javascript图片放大效果代码
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- 纯原生javascript实现图片轮播切换效果代码。