<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.show{
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.show img{
width: 100%;
height: 100%;
}
.hidden{
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
display: none;
position: relative;
}
.hidden img{
width: 400px;
height: 400px;
position: absolute;
}
span{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<div class="show">
<img src="img/1.jpg">
<span></span>
</div>
<div class="hidden">
<img src="img/1.jpg">
</div>
<script>
var span=document.querySelector('span')
var show=document.querySelector('.show')
var img=document.querySelector('.hidden')
var img1=document.querySelector('.hidden img')
show.οnmοuseοver=function(){
span.style.display='block'
img.style.display='block'
}
show.οnmοuseοut=function(){
span.style.display='none'
img.style.display='none'
}
show.οnmοusemοve=function(e){
var x=e.clientX-span.offsetWidth/2
var y=e.clientY-span.offsetHeight/2
if(x<=0){
x=0
}
else if(x>=show.offsetWidth-span.offsetWidth){
x=show.offsetWidth-span.offsetWidth
}
if(y<=0){
y=0
}
else if(y>=show.offsetHeight-span.offsetHeight){
y=show.offsetHeight-span.offsetHeight
}
span.style.left=x+'px'
span.style.top=y+'px'
var w=x/(show.offsetWidth-span.offsetWidth)
var h=y/(show.offsetHeight-span.offsetHeight)
img1.style.left=w*(img.offsetWidth-img1.offsetWidth)+'px'
img1.style.top=h*(img.offsetHeight-img1.offsetHeight)+'px'
}
</script>
</body>
</html>
js放大镜
最新推荐文章于 2024-08-30 20:29:15 发布