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


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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
jQuery使用方法
Feb 04 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 #Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 #Javascript
jquery 简单的进度条实现代码
Mar 11 #Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 #Javascript
Javascript 入门基础学习
Mar 10 #Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 #Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
asp 的 分词实现代码
2007/05/24 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python分割和拼接字符串
2013/11/01 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python函数中的可变长参数详解
2019/09/12 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
法学专业个人求职信
2013/09/26 职场文书
护理自荐信范文
2013/10/05 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
白酒市场营销方案
2014/02/25 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
施工安全协议书
2016/03/22 职场文书
导游词之天下银坑景区
2019/11/21 职场文书