鼠标移入图片放大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现图片缩略图</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{padding: 20px; margin: 0;}
li{list-style: none; float: left; margin-right: 10px; border: 1px solid #aaa;}
/*img{width: 160px;}*/
a{cursor: default;}
#tip{position: absolute; border: 1px solid #CCCCCC; background-color: #333;display: none;}
</style>
<script type="text/javascript">
$(function(){
var y=20
var x=10
$("ul li a").mouseover(function(e){
var tip="<div id='tip'><img src='"+$(this).children("img").attr("src")+"'/></div>"
$("body").append(tip)
console.log(e.pageX)
//获取鼠标所在的位置e.pageY()获得鼠标所在的y轴的位置 e.pageX获取鼠标所在的x轴的位置
$("#tip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show()
}).mouseout(function(){
$("#tip").remove()
}).mousemove(function(e){
$("#tip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
})
})//鼠标指针移动时触发的事件
})
</script>
</head>
<body>
<p>图片放大效果：</p>
<ul>
<li><a href="/go.html?url=#"><img src="img/1.png" width="160px"/></a></li>
<li><a href="/go.html?url=#"><img src="img/2.png" width="160px"/></a></li>
<li><a href="/go.html?url=#"><img src="img/3.png" width="160px"/></a></li>
<li><a href="/go.html?url=#"><img src="img/4.png" width="160px"/></a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<hea
