Initial code
<!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>
Page interface
Problem Description
There are two identical pictures, a large picture (set to invisible), and a small picture, in the middle of the page.
When the mouse enters the picture, the big picture appears immediately. At the lower right of the mouse pointer, as the mouse moves, when the mouse moves out of the picture, the big picture is hidden,
Code
<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>
Note:
left:event.pageX + 10,
top:event.pageY + 10 When
setting the position to display the big picture, it is offset a bit to the lower right relative to the position of the mouse. This is because if it is close, the mouse is facing Moving the lower right is equivalent to moving the mouse to the big picture first (leaving the small picture), then the big picture disappears, and then the mouse is on the small picture, and the big picture reappears, so the effect is cyclical and intermittent, and the effect is not good.
Even in extreme cases, as soon as the big picture appears, the mouse is on the big picture (mouse moves out), and the big picture disappears again, which is visually equivalent to the big picture not appearing. Therefore, the actual position of the large image should be appropriately offset relative to the mouse position.