jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能

<!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>无标题文档</title> 
<script type="text/javascript" src="http://www.wangzuxi.cn/wp-content/uploads/jquery-1.3.2.js"></script><!--包含jQuery库文件--> 
<script type="text/javascript" src="http://www.wangzuxi.cn/wp-content/uploads/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="http://www.wangzuxi.cn/wp-content/uploads/image/wife.jpg"  /></a></div> 
</body> 
</html>

   1: /*

   2: * Tooltip script

   3: * powered by 淅淅代码雨

   4: *

   5: * written by Wany

   6: *

   7: *

   8: */

   9: this.tooltip = function(){

  10:     var xOffset = 10;//定义x的偏移量

  11:     var yOffset = 20;//定义y的偏移量

  12:     $("img").mousemove(function(e){

  13:     var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//获取当前鼠标相对img的x坐标

  14:     var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//获取当前鼠标相对img的y坐标，（以下用不着，可删除）

  15:     var tipTitle;//定义提示标题

  16:      if(positionX<=$(this).width()/2)//当当前鼠标相对x坐标小于图片宽度的一半时执行

  17:      {

  18:          $('p').remove();//移除p标签

  19:          $('a').attr('href','http://www.google.cn');//修改a标签的href属性以改变链接

  20:          tipTitle='谷歌';

  21:      }

  22:      else

  23:      {

  24:          $('p').remove();

  25:          $('a').attr('href','http://www.baidu.com');

  26:         tipTitle='百度';

  27:      }

  28:     $("body").append("<p id='tooltip'>"+tipTitle+"</p>");//在body标签里添加这个p标签，实现提示功能

  29:     $("#tooltip").css("top",(e.pageY - xOffset) + "px")//为id为tooltip的元素设置css样式

  30:         .css("left",(e.pageX + yOffset) + "px")

  31:         .fadeIn("fast");//添加动画效果

  32:     },

  33:     function(){

  34:         $("#tooltip").remove();//鼠标移动时移除tooltip，实现提示和鼠标的相对位置不变

  35:         });

  36:     $("img").mouseout(function(e){

  37:         $("#tooltip").remove();//鼠标移出img标签时不再显示tooltip，用remove函数将其移除

  38:     });

  39: };

  40: $(document).ready(function(){

  41:     $('img').css('border','none');

  42:     tooltip();

  43: });