基于jQuery的鼠标悬停时放大图片的效果制作

这是一个基于jQuery的效果，当鼠标在小图片上悬停时，会弹出一个大图，该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：

查看演示

HTML结构部分：

先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。

1
<ul id="gallery">

2
 <li><a href="http://stylechen.com/" class="smallimage" rel="images/001_big.jpg"><img src="images/001_small.jpg" alt=""></a></li>

3
  
4
 <li><a href="http://stylechen.com/" class="smallimage" rel="images/002_big.jpg"><img src="images/002_small.jpg" alt=""></a></li>

5
  
6
 <li><a href="http://stylechen.com/" class="smallimage" rel="images/003_big.jpg"><img src="images/003_small.jpg" alt=""></a></li>

7
</ul>

CSS样式表部分：

bigimage是用jQuery创建的一个p标签的id，用来存放大图片，设置其样式为绝对定位，并先隐藏。给a标签添加一个黑色的背景，是为了给图片变暗的效果做铺垫。就这样，一个简单的相册效果就做好了。

1
ul#gallery { list-style:none; 660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; }

2
 
3
ul#gallery li { 200px; height:200px; float:left; margin:20px 20px 20px 0; }

4
 
5
ul#gallery li a.smallimage { background:#333; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; 200px; height:200px; }

6
 
7
#bigimage { position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ }

8
 
9
#bigimage img { 400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }

jQuery代码部分：

先声明2个变量x，y用来存放大图片离鼠标的距离。在body中追加一个id为bigimage的p标签，用来存放大图片，大图片的路径就包含在了a标签的rel属性中。当鼠标在小图片悬停的时候，将获取到的鼠标在浏览器中的坐标赋值给大图片绝对定位的坐标，并以淡入的效果显示。之后，再给小图片绑定一个mousemove事件，也就是当鼠标移动的时候，大图片就会跟着鼠标移动了。看以下的代码：

01
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

02
<script type="text/javascript">

03
//<![CDATA[

04
$(function(){

05
 
06
 var x = 22;

07
 var y = 20;

08
 
09
 $("a.smallimage").hover(function(e){ //绑定一个鼠标悬停时事件

10
    //新建一个p标签来存放大图片，this.rel就是获取到a标签的大图片的路径，然后追加到body中

11
 $("body").append("<p id="bigimage"><img src="" this.rel "" alt="" /></p>");

12
         
13
    //改变小图片的透明度为0.5，结合上面的CSS，看起来就象是图片变暗了

14
 $(this).find("img").stop().fadeTo("slow",0.5);

15
         
16
    //将鼠标的坐标和声明的x，y做运算并赋值给大图片绝对定位的坐标，然后以fadeIn的效果显示

17
 $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX x ) "px"}).fadeIn("fast");

18
         
19
 },function(){ <a href="http://www.sorcerylinux.org/">best australian pokies</a> //鼠标离开后

20
     
21
    //将变暗的图片复原

22
 $(this).find("img").stop().fadeTo("slow",1);

23
         
24
    //移除新增的p标签

25
 $("#bigimage").remove();

26
 });

27
     
28
 $("a.smallimage").mousemove(function(e){ //绑定一个鼠标移动的事件

29
     
30
 //将鼠标的坐标和声明的x，y做运算并赋值给大图片绝对定位的坐标，这样大图片就能跟随图片而移动了

31
 $("#bigimage").css({top:(e.pageY -y ) "px",left:(e.pageX x ) "px"});

32
 });

33
});

34
 
35
//]]>

36
</script>

到这一步，效果已经差不多了，但是正如蓝秋枫同志提到的，效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条，这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。

先分析下思路，默认情况下，弹出的大图片的位置始终是在当前鼠标指针的右侧，如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时，就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度，然后再根据这个判断来显示。

有了上面的思路就好办了，为了使代码更简洁，提高复用性，我新增了一个widthJudge函数用于判断宽度：

01
function widthJudge(e){

02
//页面的总宽度减去鼠标当前的X坐标得到右侧边界的宽度

03
       var marginRight = document.documentElement.clientWidth - e.pageX;

04
 
05
//获取弹出的大图片的宽度

06
       var imageWidth = $("#bigimage").width();

07
 
08
//如果右侧边界的宽度小于弹出的大图片的宽度

09
       if(marginRight < imageWidth)

10
       {

11
//重新计算变量x的值

12
        x = imageWidth 22;

13
 
14
//此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值

15
        $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX - x ) "px"});   

16
       }else{ //否则

17
//仍将x定义为22，这一步千万不能省略，因为之前x的值已经改变

18
        x = 22;

19
 
20
//如果右侧的宽度值够显示大图片，将仍然按照原来的位置显示

21
        $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX x ) "px"});

22
};

23
   }

最后再结合上面的代码，完整的jQuery代码部分如下：

01
<script type="text/javascript">

02
//<![CDATA[

03
$(function(){  

04
     
05
 var x = 22;

06
    var y = 20;

07
         
08
    $("a.smallimage").hover(function(e){

09
 $("body").append("<p id="bigimage"><img src="" this.rel "" alt="" /></p>");

10
 $(this).find("img").stop().fadeTo("slow",0.5);    

11
     widthJudge(e); //调用宽度判断函数

12
     $("#bigimage").fadeIn("fast");

13
    },function(){

14
     $(this).find("img").stop().fadeTo("slow",1);

15
     $("#bigimage").remove();

16
 });   

17
     
18
    $("a.smallimage").mousemove(function(e){

19
     widthJudge(e); //调用宽度判断函数

20
    });

21
     
22
 function widthJudge(e){

23
        var marginRight = document.documentElement.clientWidth - e.pageX;

24
        var imageWidth = $("#bigimage").width();

25
        if(marginRight < imageWidth)

26
        {

27
         x = imageWidth 22;

28
         $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX - x ) "px"});   

29
        }else{

30
         x = 22;

31
         $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX x ) "px"});

32
 };

33
    }

34
});

35
//]]>

36
</script>

解决了图片溢出浏览器的问题，这个效果还算不错了。如果你喜欢这个效果，你可以下载源文件。

原载于：雨夜带刀’s Blog
本文链接：http://stylechen.com/jquery-image-hover-zoom.html