javascript 圖片上一張下一張鏈接效果代碼
2024-05-06 14:11:09
供稿：網友
貼個實現方法：
代碼
代碼如下:
<!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.Vevb.com/js/img_left_right/jquery_img_lr.htm
打包下載地址 //www.49028c.com/jiaoben/25129.html
相關文章:
clientX,pageX,offsetX,x,layerX,screenX,offsetLef
JS在IE和FireFox之間常用函數的區別小結
javascript offsetX與layerX區別
jQuery 點擊圖片跳轉上一張或下一張功能的實現代碼
