鼠标悬停出现大图并跟随鼠标指针移动

鼠标悬停出现大图并跟随鼠标指针移动:
在一些具有图片列表的网站中，当鼠标放在小图上的时候能够弹出一个大图，并且当鼠标在图片上移动的时候，大图也能够随着鼠标指针运动，非常的人性化，也提高了网站的动态化效果，下面简单介绍一下如何实现此效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的鼠标悬停时放大图片的效果制作</title>
<style>
* {
  margin:0;
  padding:0;
}
img{
  vertical-align:bottom;
  border:none;
}
body{
  background:#f0f0f0;
  height:800px;
  font-family:Arial;
}
ul {
  list-style:none;
}
h1{
  font-size:20px;
  width:680px;
  margin:3% auto 5px;
  color:#202020;
}
ul#gallery{
  width:660px;
  margin:0 auto 10px;
  padding-left:20px;
  border:1px solid #d3d3d3;
  background:#fff;
  overflow:hidden;
}
ul#gallery li{
  width:200px;
  height:200px;
  float:left;
  margin:20px 20px 20px 0;
  display:inline;
}
ul#gallery li a.smallimage{
  background:#333;
  display:block;
  width:200px;
  height:200px;
}
#bigimage{
  position:absolute;
  display:none;
}
#bigimage img{
  width:400px;
  height:400px;
  padding:5px;
  background:#fff;
  border:1px solid #e3e3e3;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
  var x = 22;
  var y = 20;
   
  $("a.smallimage").hover(function(e){
    $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');
    $(this).find('img').stop().fadeTo('slow',0.5);  
    widthJudge(e);
    $("#bigimage").fadeIn('fast');
  },function(){
    $(this).find('img').stop().fadeTo('slow',1);
    $("#bigimage").remove();
  }); 
  $("a.smallimage").mousemove(function(e){
    widthJudge(e);
  }); 
  function widthJudge(e){
    var marginRight = document.documentElement.clientWidth - e.pageX; 
    var imageWidth = $("#bigimage").width();
    if(marginRight < imageWidth){
      x = imageWidth + 22;
      $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'}); 
    }
   else{
      x = 22;
      $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'});
    }; 
  }
})
</script>
</head>
<body>
<ul id="gallery">
<li>
  <a href="#" class="smallimage" rel="mytest/code/726/images/001_big.jpg">
   <img src="mytest/code/726/images/001_small.jpg" alt="" />
  </a>
</li>
<li>
<a href="#" class="smallimage" rel="mytest/code/726/images/002_big.jpg">
  <img src="mytest/code/726/images/002_small.jpg" alt="" />
</a>
</li>
<li>
<a href="#" class="smallimage" rel="mytest/code/726/images/003_big.jpg">
  <img src="mytest/code/726/images/003_small.jpg" alt="" />
</a>
</li>
</ul>
</body>
</html>

代码实现了效果，当鼠标放在图片上的时候可以出现大图，当鼠标在小图中移动时，大图也会跟随者鼠标指针运动。
下面简单介绍一下实现此效果的过程:
一.实现原理:
当鼠标放在图片上的时候就会触发小图的hover事件，hover事件的处理函数可以为body添加p元素以控制大图的显示并且调用widthJudge()函数用以控制大图的坐标位置，当鼠标离开的时候会移除添加的p元素使大图消失。当鼠标在小图中移动的时候会触发小图的mousemove事件，此事件处理函数可以调用widthJudge()函数用以控制大图的坐标。
二.代码注释:
1.$(function(){}，规定当文档结构完全加载完成时再去执行函数中的代码。
2.var x = 22和var y = 20用来规定鼠标指针距离大图的距离。
3.$("a.smallimage").hover(function(e){}，为小图绑定hover事件处理函数。关于hover事件可以参阅 jQuery的hover事件。
4.$("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>")，用于添加一个p元素，p中的图片即是要显示的大图。大图的src属性值是当前小图的rel属性值。
5.$(this).find('img').stop().fadeTo('slow',0.5)，将小图设置为半透明。
6.$("#bigimage").fadeIn('fast')显示图片。
7.$(this).find('img').stop().fadeTo('slow',1)将小图恢复原样。
8.$("#bigimage").remove()，移除添加的p元素，也就是隐藏大图。
9.$("a.smallimage").mousemove(function(e){}，为小图绑定mousemove事件处理函数以此调用widthJudge()函数。关于mousemove函数可以参阅jQuery的mousemove事件。
10.function widthJudge(e){}，此事件用于控制图片的位置，e是事件对象。
11.var marginRight = document.documentElement.clientWidth - e.pageX，用来计算鼠标指针右半部可见区域的尺寸。
12.var imageWidth = $("#bigimage").width()，用来获得大图的宽度。
13.if(marginRight < imageWidth)用来判断鼠标指针右半部可见区域的尺寸是否小于大图的宽度，如果小于的话则将图片在鼠标指针的左侧显示，否则在鼠标指针的右侧显示。这基本就是一个数学逻辑问题。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=7989

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]