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 相关文章推荐
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
Ionic快速安装教程
Jun 03 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
深入理解Django的自定义过滤器
2017/10/17 Python
python实现员工管理系统
2018/01/11 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
学生思想表现的评语
2014/01/30 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
教师师德演讲稿
2014/05/06 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
教育教学工作反思
2016/02/24 职场文书
你会写请假条吗?
2019/06/26 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
python分分钟绘制精美地图海报
2022/02/15 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js