欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript 图片上一张下一张链接效果代码

程序员文章站 2022-07-04 12:41:10
贴个实现方法： 代码 复制代码 代码如下:
贴个实现方法：
代码
复制代码 代码如下:

<!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>
在线演示代码:

打包下载地址

相关文章:
clientx,pagex,offsetx,x,layerx,screenx,offsetlef
js在ie和firefox之间常用函数的区别小结
javascript offsetx与layerx区别
jquery 点击图片跳转上一张或下一张功能的实现代码

上一篇： 揭秘：春秋时期客卿形成的原因是什么？

下一篇： 这届币圈年轻人，搞NFT到底有多“野”？

推荐阅读