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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
Vue自定义多选组件使用详解
Sep 08 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php设计模式 Builder(建造者模式)
2011/06/26 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
javascript 函数式编程
2007/08/16 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
利用JS实现数字增长
2016/07/28 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
详解Python发送邮件实例
2016/01/10 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
购房意向书范本
2014/04/01 职场文书