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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
Vue-Router的使用方法
Sep 05 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 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制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
详解Python中find()方法的使用
2015/05/18 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python pymysql库的常用操作
2020/10/16 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
最新远光软件笔试题面试题内容
2013/11/08 面试题
模具数控专业自荐信
2014/01/27 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
2014年冬季防火方案
2014/05/21 职场文书
离婚协议书范本样本
2014/08/19 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python