javascript 圖片上一張下一張鏈接效果代碼

更新時(shí)間：2010年03月12日 18:49:03 作者：

人人網(wǎng)相冊和酷狗音樂網(wǎng)站上面當(dāng)鼠標(biāo)移動(dòng)到圖片上面，鼠標(biāo)的形狀會(huì)根據(jù)其在圖片上的位置改變。

貼個(gè)實(shí)現(xiàn)方法：
代碼

 
<!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>無標(biāo)題頁</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','點(diǎn)擊查看上一張'); 
$(this).parent().attr('href',$(this).attr('left')); 
}else{ 
this.style.cursor='url("next.cur"),auto'; 
$(this).attr('title','點(diǎn)擊查看下一張'); 
$(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.需要調(diào)用Jquery。
2.這里獲取鼠標(biāo)在圖片的位置用了個(gè)投機(jī)的方法，設(shè)置圖片的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.jb51.net/js/img_left_right/jquery_img_lr.htm

打包下載地址 http://www.dhdzp.com/jiaoben/25129.html

相關(guān)文章:
clientX,pageX,offsetX,x,layerX,screenX,offsetLef
JS在IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)
javascript offsetX與layerX區(qū)別
jQuery 點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能的實(shí)現(xiàn)代碼

您可能感興趣的文章: