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 tab 选项卡
Apr 26 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
js实现随机点名小功能
2017/08/17 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
2015年平安创建工作总结
2015/04/29 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server