鼠标悬停出现大图并跟随鼠标指针移动:
在一些具有图片列表的网站中，当鼠标放在小图上的时候能够弹出一个大图，并且当鼠标在图片上移动的时候，大图也能够随着鼠标指针运动，非常的人性化，也提高了网站的动态化效果，下面简单介绍一下如何实现此效果:
<!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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="'+ this.rel + '" /></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='/images/loading.gif' data-original="mytest/code/726/images/001_small.jpg" /> </a></li><li><a href="#" class="smallimage" rel="mytest/code/726/images/002_big.jpg"> <img src='/images/loading.gif' data-original="mytest/code/726/images/002_small.jpg" /></a></li><li><a href="#" class="smallimage" rel="mytest/code/726/images/003_big.jpg"> <img src='/images/loading.gif' data-original="mytest/code/726/images/003_small.jpg" /></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='/images/loading.gif' data-original="'+ this.rel + '" /></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/
原标题：鼠标悬停出现大图并跟随鼠标指针移动
关键词：
我知道了 