jQuery 點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能的實(shí)現(xiàn)代碼

更新時(shí)間：2010年03月12日 19:20:08 作者：

jQuery獲取當(dāng)前鼠標(biāo)相對(duì)位置坐標(biāo)和點(diǎn)擊圖片跳轉(zhuǎ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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script><!--包含jQuery庫文件--> 
<script type="text/javascript" src="jquery.tooltip.js"></script><!--包含jQuery庫的tooltip插件文件--> 
<style> 
h1{ 
font-size:180%; 
font-weight:normal; 
color:#555; 
} 
a{ 
text-decoration:none; 
color:#f30; 
} 
p{ 
clear:both; 
margin:0; 
padding:.5em 0; 
} 
pre{ 
display:block; 
font:100% "Courier New", Courier, monospace; 
padding:10px; 
border:1px solid #bae2f0; 
background:#e3f4f9; 
margin:.5em 0; 
overflow:auto; 
width:800px; 
} 


/* tooltip的樣式 */ 

#tooltip{ 
position:absolute; 
border:1px solid #333; 
background:#f7f5d1; 
padding:2px 5px; 
color:#333; 
display:none; 
} 
</style> 
</head> 
<body> 
<div><a href="" class="tooltip"><img src="image/wife.jpg" /></a></div> 
</body> 
</html> 

復(fù)制代碼代碼如下:

 
/* 
* Tooltip script 
* powered by 淅淅代碼雨 
* 
* written by Wany 
* 
* 
*/ 
this.tooltip = function(){ 
var xOffset = 10;//定義x的偏移量 
var yOffset = 20;//定義y的偏移量 
$("img").mousemove(function(e){ 
var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//獲取當(dāng)前鼠標(biāo)相對(duì)img的x坐標(biāo) 
var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//獲取當(dāng)前鼠標(biāo)相對(duì)img的y坐標(biāo)，（以下用不著，可刪除） 
var tipTitle;//定義提示標(biāo)題 
if(positionX<=$(this).width()/2)//當(dāng)當(dāng)前鼠標(biāo)相對(duì)x坐標(biāo)小于圖片寬度的一半時(shí)執(zhí)行 
{ 
$('p').remove();//移除p標(biāo)簽 
$('a').attr('href','http 
//www.google.cn');//修改a標(biāo)簽的href屬性以改變鏈接 
tipTitle='谷歌'; 
} 
else 
{ 
$('p').remove(); 
$('a').attr('href','http 
//www.baidu.com'); 
tipTitle='百度'; 
} 
$("body").append("<p id='tooltip'>"+tipTitle+"</p>");//在body標(biāo)簽里添加這個(gè)p標(biāo)簽，實(shí)現(xiàn)提示功能 
$("#tooltip").css("top",(e.pageY - xOffset) + "px")//為id為tooltip的元素設(shè)置css樣式 
.css("left",(e.pageX + yOffset) + "px") 
.fadeIn("fast");//添加動(dòng)畫效果 
}, 
function(){ 
$("#tooltip").remove();//鼠標(biāo)移動(dòng)時(shí)移除tooltip，實(shí)現(xiàn)提示和鼠標(biāo)的相對(duì)位置不變 
}); 
$("img").mouseout(function(e){ 
$("#tooltip").remove();//鼠標(biāo)移出img標(biāo)簽時(shí)不再顯示tooltip，用remove函數(shù)將其移除 
}); 
}; 
$(document).ready(function(){ 
$('img').css('border','none'); 
tooltip(); 
}); 