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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
vue-cli 引入、配置axios的方法
May 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
php 异常处理实现代码
2009/03/10 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
BootStrap中
2016/12/10 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
现代化办公人员工作的自我评价
2013/10/16 职场文书
高三政治教学反思
2014/02/06 职场文书
体育之星事迹材料
2014/05/11 职场文书
后备干部培训方案
2014/05/22 职场文书
小学数学教研活动总结
2014/07/01 职场文书
开会通知短信大全
2015/04/20 职场文书