初始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
} 大图片先设置为隐藏 即，display: none;
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
--------------------代码实现------------------------------
</script>
</head>
<body>
<img id="small" src="img_图片跟随/small.jpg" />
<div id="showBig">
<img src="img_图片跟随/big.jpg">
</div>
</body>
</html>
页面界面
问题描述
有两张一模一样的图片，一张大图片(设置为不可见)，一张小图片，在页面中间。
当鼠标进入图片时，大图片随即出现，在鼠标指针右下方处，随着鼠标移动，当鼠标移出图片时，大图片隐藏、
代码实现
<script type="text/javascript">
$(function () {
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type=="mouseover") {
//进入图片,显示图片
$("#showBig").show();
}else if(event.type=="mousemove") {
//设置大图片出现的位置，左上方在鼠标处
$("#showBig").offset({
//event里记录有当前指针坐标的信息
left:event.pageX + 10, //逗号间隔
top:event.pageY + 10 //为什么要加10呢？思考一下
});
} else if (event.type=="mouseout") {
$("#showBig").hide();
}
});
});
</script>
注意：
left:event.pageX + 10,
top:event.pageY + 10
这里设置显示大图的位置时，相对于鼠标所在位置向右下偏移了一点，这是因为如果是紧贴的话，鼠标向右下方移动，相当于鼠标先移动到了大图上(离开了小图)，此时大图消失，然后鼠标在小图上，大图又出现，这样循环往复、断断续续，效果不好。
甚至极端情况下，大图一出现，鼠标就在大图上了(鼠标移出)，大图又消失，视觉上相当于大图没出现。因此要给大图的实际位置相对于鼠标位置产生一点适当的偏移。