实现图片放大镜效果-优快云博客

本文链接：https://blog.youkuaiyun.com/grass_root_boy/article/details/80112365

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>

<style type="text/css">
#showimg{
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
position: relative;
}
#showimg img{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#xsquare{
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: #FF0000;
opacity: 0.5;
}
#bigtu{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
#bigimg{
width: 1000px;
height: 1000px;
position: absolute;
left: 0;
top: 0;
}
#move{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
z-index: 3;
}
</style>

<script>
function moveini(){
var movesquare = document.getElementById("move");
movesquare.onmousemove=function(){
var xsquare1 = document.getElementById("xsquare");

var x = window.event.offsetX-10;
if(x>=180){
x=180;
}
if(x<=0){
x=0;
}

var y = window.event.offsetY-10;
if(y>=180){
y=180;
}
if(y<=0){
y=0;
}

xsquare1.style.left = x +"px";
xsquare1.style.top = y +"px";

//大图开始移动
var bigimg = document.getElementById("bigimg");
bigimg.style.left = -(x*5)+"px";
bigimg.style.top = -(y*5)+"px";
}
}
</script>

</head>
<body onload="moveini()">
<div id="showimg">
<img src="image/5.jpg" />
<div id="xsquare"></div>
<div id="move"></div>
</div>
<div id="bigtu"><img id="bigimg" src="image/5.jpg" /></div>
</body>
</html>

js简易放大镜效果