鼠标放在产品的小图上的时候，出现一个可以跟随鼠标指针移动的大图。
下面通过实例介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.gaodaima.com/" />
<title>大图跟随效果代码-搞代码</title>
<style type="text/css">
li{
list-style:none;
height:262px;
width:350px;
border:5px solid #F60;
}
#tooltip{
position:absolute;
}
#newTip{
text-align:center;
font-size:12px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var x=10;
var y=20;
$("a.tooltip").hover(function(){
var title=this.title;
var $div=$("<div id='newTip'><img src='"+this.href+"'/><br/>"+title+"</div>");
$("body").append($div);
$div.css({"position":"absolute","background":"silver"}).show("fast");
},function(){
$("#newTip").remove();
}).mousemove(function(e){
var $div= $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});
});
})
</script>
</head>
<body>
<ul>
<li>
<a href="http://img.gaodaima.com/paperimg_gaodaima_chengxuyuan.jpg" class="tooltip" title="程序员">
<img src="http://img.gaodaima.com/paperimg_gaodaima_chengxuyuan.jpg" border="0"/>
</a>
</li>
</ul>
</body>
</html>
当鼠标在小图中移动的时候，能够出现一个大图跟随鼠标移动，下面介绍一下实现过程。
一.实现原理:
当鼠标放在小图上的时候，能够动态创建一个div对象节点，此节点中包含有大图，当鼠标离开小图的时候，常见的节点对象会被删除。同时为小图注册mousemove事件处理函数，当鼠标在小图中移动的时候，能够将创建的div的left和top属性值设置为e.pageX+x和e.pageY+y，之所以要加x和y是为了让大图和鼠标指针之间有一定的距离。
二.代码注释:
（1）.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.var x=10，var y=20，用于规定鼠标指针和大图左上角的距离。
（3）.$(“a.tooltip”).hover(function(){})，为class属性值为tooltip的链接注册hover事件处理函数。
（4）.var title=this.title;，将链接的title属性赋值给变量title。
（5）.var $div=$(“<div id=’newTip’><img src='”+this.href+”‘/><br/>”+title+”</div>”)，创建一个节点对象，里面包含有<img>,它的src属性就是链接的href属性值，并且在图片下面显示title值。
（6）.$(“body”).append($div)，在body中添加创建的此节点对象。[
（7）.$div.css({“position”:”absolute”,”background”:”silver”}).show(“fast”)，将创建的div设置为绝对定位，并且背景色为silver。
（8）.$(“#newTip”).remove()，移除创建的div节点对象。
（9）.mousemove(function(e){})，注册mousemove事件处理函数，e为事件对象。
（10）.var $div= $(“#newTip”).css({“left”: (e.pageX+x)+’px’,”top”: (e.pageY+y)+’px’}).show(“fast”)，设置div的left和top属性值。
转载请注明原文链接：jQuery大图跟随效果代码实例
