文章正文
jQuery 点击图片跳转上一张或下一张功能的实现代
作者:admin    发布于:2020-05-24   文字:【】【】【

  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;//获取当前鼠标相对img的x坐标

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

  var tipTitle;//定义提示标题

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

  {

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

  $('a').attr('href','http

  //www.google.cn');//修改a标签的href属性以改变链接

  tipTitle='谷歌';

  }

  else

  {

  $('p').remove();

  $('a').attr('href','http

  //www.baidu.com');

  tipTitle='百度';

  }

  $("body").append("

"+tipTitle+"

");//在body标签里添加这个p标签,实现提示功能

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

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

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

  },

  function(){

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

  });

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

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

  });

  };

  $(document).ready(function(){

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

  tooltip();

  });

脚注信息