前端ABC<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
*{
margin: 0;
padding: 0;
}
.smallBox{
top: 100px;
left: 50px;
position: absolute;
width: 350px;
height: 350px;
border: 1px solid #000;
}
.mask{
width: 175px;
height: 175px;
position: absolute;
left: 0;
top: 0;
display: none;
background-color: rgba(221,165,32,0.4);
}
.bigBox{
position: absolute;
top: 100px;
left: 410px;
border: 1px solid #000;
width: 400px;
height: 400px;
overflow: hidden;
display: none;
}
.bigBox img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="smallBox" id="smallBox">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/13/234224kkzdkzppud4i2pkp.jpg" alt=""/>
<div class="mask" id="mask"></div>
</div>
<div class="bigBox" id="bigBox">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/13/234232r8g5hq0h8y8g8gbb.jpg" alt="" id="bigImg"/>
</div>
</div>
</body>
<!--common.js 我已经封装好了兼容获取鼠标在页面的位置的函数-->
<script>
var smallBox=document.getElementById('smallBox');
var mask=document.getElementById('mask');
var bigBox=document.getElementById('bigBox');
var bigImg=document.getElementById('bigImg');
// 第一步:鼠标移上小盒子让遮罩层显示
smallBox.onmousemove=function(e){
e=e||window.event;
// 让遮罩层和大盒子显示
mask.style.display='block';
bigBox.style.display='block';
// 获取鼠标的在小盒子中的位置
var maskX=page(e).pageX-smallBox.offsetLeft;
var maskY=page(e).pageY-smallBox.offsetTop;
// 让鼠标在遮罩层的中间位置
var x=maskX-mask.offsetWidth/2;
var y=maskY-mask.offsetHeight/2;
//不能让遮罩层移除小盒子的范围
x=x<0?0:x;
y=y<0?0:y;
x=x>smallBox.offsetWidth-mask.offsetWidth?smallBox.offsetWidth-mask.offsetWidth:x;
y=y>smallBox.offsetHeight-mask.offsetHeight?smallBox.offsetHeight-mask.offsetHeight:y;
mask.style.left=x+'px';
mask.style.top=y+'px';
// 最后让大图片的位置随着遮罩层的位置发生变化，移动的方向为反方向
// 算法:(大盒子/遮罩层)=(大图片/小图片)，按照这个比例算就行了
bigImg.style.left=-bigBox.offsetWidth/mask.offsetWidth*x+'px';
bigImg.style.top=-bigBox.offsetHeight/mask.offsetHeight*y+'px';
}
smallBox.onmouseout=function(){
mask.style.display='none';
bigBox.style.display='none';
}
/*----封装页面的坐标函数---*/
function page(e) {
return {
pageY: e.pageY || e.clientY + document.documentElement.scrollTop,
pageX: e.pageX || e.clientX + document.documentElement.scrollLeft
}
}
</script>
</html>
欢迎分享本文，转载请保留出处：前端ABC » js原生放大镜详细案例