编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery\jquery.js"></script>
<style>
#newImg {
position: absolute;
}
</style>
</head>
<body>
<img src="imgs/1_small.jpg" alt="">
<img src="imgs/2_small.jpg" alt="">
<img src="imgs/3_small.jpg" alt="">
<script>
$(function() {
$("img").css({
"width": "128px",
"heigth": "96px"
})
$("img").on({
mouseenter: function() {
//获取索引
var index = $(this).index() + 1;
// alert("1")
//追加标签
$("body").append($("<div id='newImg'><img src='imgs/" + index + ".jpg' /></div>"))
//设置图片位置
$("#newImg").css({
"top": event.pageY + 10 + "px",
"left": event.pageX + 10 + "px"
})
},
mouseleave: function() {
$("#newImg").remove()
},
mousemove: function() {
/* $("#newImg").css({
"top":event.pageY+10+"px",
"left":event.pageX+10+"px"
})
*/
}
})
})
</script>
</body>
</html>
运行结果
