<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
margin: 100px 10px 0 150px;
border: 1px solid #000;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 310px;
border: 1px solid #000;
overflow: hidden;
display: none;
background-color: #000;
}
.mask {
width: 150px;
height: 150px;
background-color: rgba(255, 255, 0, .5);
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.small{
position: relative;
}
.fl{
float: left;
}
img{
vertical-align: top;
}
</style>
<script>
window.onload = function () {
//获取相关元素
var box = document.getElementsByClassName("box")[0];
var small = document.getElementsByClassName("small")[0];
var mask = document.getElementsByClassName("mask")[0];
var big = document.getElementsByClassName("big")[0];
var img = document.getElementsByTagName("img")[1];
//放上去放右侧盒子显示
small.onmouseenter = function () {
big.style.display ="block";
}
//鼠标放上去让右侧盒子隐藏
small.onmouseleave = function () {
big.style.display ="none";
}
//鼠标在small移动时让右侧照片跟着移动，此处采用margin去做的，也可以使用定位去做
small.onmousemove =function (ev) {
//事件对象兼容性写法
ev = event||window.event;
//获取鼠标在盒子中的值，然后减去盒子的一般，让鼠标在盒子中间显示
var x = (ev.pageX||scroll().left)-box.offsetLeft-75;
var y = (ev.pageY||scroll().top)-box.offsetTop-75;
//限定盒子的x方向移动范围
if(x<0){
x =0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x=small.offsetWidth-mask.offsetWidth;
}
//限定盒子的y方向移动范围
if(y<0){
y =0;
}
if(y>small.offsetHeight-mask.offsetHeight){
y=small.offsetHeight-mask.offsetHeight;
}
//让盒子移动
mask.style.left = x+"px";
mask.style.top = y+"px";
//这块一定要注意，这个值一定要在盒子显示出来之后定义否则img.offsetWidth获取为0
var bl = img.offsetWidth/small.offsetWidth;
console.log(bl);
// 让右侧盒子里面的照片移动
img.style.marginLeft = -1*x*bl+"px";
img.style.marginTop = -1*y*bl+"px";
// console.log(x);
// console.log(y);
}
//scroll兼容性封装
function scroll() {
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="small fl">
<img src="imgs/lzx.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big hide">
<img src="imgs/lzd.jpg" alt="">
</div>
</div>
</body>
</html>
