<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>放大镜案例</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
position: relative;
float: left;
left: 100px;
top: 100px;
}
.bigImg{
float: left;
width: 400px;
height: 400px;
position: relative;
left: 160px;
top: 100px;
overflow: hidden;
display: none;
}
.bigImg>img{
position: absolute;
width: 2400px;
height: 2400px;
}
.move{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: rgba(47,177,209,.4);
display: none;
}
</style>
</head>
<body>
<div class="box">
<img src="img/timg.jpg" alt=""/>
<div class="move"></div>
</div>
<div class="bigImg">
<img src="img/timg.jpg" alt="" id="big"/>
</div>
<script>
var box=document.querySelector('.box');
var move=document.querySelector('.move');
var bigImg=document.querySelector('#big');
box.οnmοusemοve= function () {
move.style.display='block';
document.querySelector('.bigImg').style.display='block';
var clientX=event.clientX;
var clientY=event.clientY;
var bX=box.offsetLeft;
var bY=box.offsetTop;
console.log(box.offsetWidth);
console.log(move.offsetWidth);
// 判断最左边边界
if(clientX-bX<Math.floor(move.offsetWidth/2)){
clientX=bX+Math.floor(move.offsetWidth/2);
}
// 判断最右边边界
if(clientX-bX-Math.floor(move.offsetWidth/2)>box.offsetWidth-move.offsetWidth){
clientX=box.offsetWidth+Math.floor(move.offsetWidth/2);
}
// top边界
if(clientY-bY<Math.floor(move.offsetHeight/2)){
clientY=bY+Math.floor(move.offsetHeight/2);
}
判断bottom边界
if(clientY-bY>box.offsetHeight-move.offsetHeight/2){
clientY=box.offsetHeight+Math.floor(move.offsetHeight/2);
}
move.style.top=clientY-bY-Math.floor(move.offsetHeight/2)+'px';
move.style.left=clientX-bX-Math.floor(move.offsetWidth/2)+'px';
// 在放大镜移动时,大的图片也要移动相应比例,移动方向相反
var move_x=(clientX-bX-Math.floor(move.offsetWidth/2))/(box.offsetWidth-move.offsetWidth);
var move_y=(clientY-bY-Math.floor(move.offsetHeight/2))/(box.offsetHeight-move.offsetHeight);
var bigDiv_x=document.querySelector('.bigImg').offsetWidth;
var bigDiv_y=document.querySelector('.bigImg').offsetHeight;
bigImg.style.left=(bigImg.offsetWidth-bigDiv_x)*(-move_x)+'px';
bigImg.style.top=(-move_y)*(bigImg.offsetHeight-bigDiv_y)+'px';
};
box.οnmοuseleave= function () {
move.style.display='none';
document.querySelector('.bigImg').style.display='none';
};
</script>
</body>
</html>
放大镜小案例_JavaScript
最新推荐文章于 2022-04-14 16:52:25 发布