<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box {
width: 400px;
height: 225px;
position: relative;
margin: 40px 0px 0px 100px;
}
.smallbox {
height: 225px;
}
.bigbox {
width: 530px;
height: 265px;
position: absolute;
top: -40px;
left: 410px;
display: none;
overflow: hidden;
}
.bigbox img {
position: absolute;
width: 1300px;
height: 731px;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="smallbox" id="s-box">
<img src="img/small.png" alt="">
<div class="mask" id="m-box"></div>
</div>
<div class="bigbox" id="b-box">
<img src="img/big.png" alt="" id="img">
</div>
</div>
<script>
/* 鼠标进入显示遮罩层 */
$('s-box').onmouseenter = function(){
$('m-box').style.display = 'block';
$('b-box').style.display = 'block'
}
/* 鼠标离开关闭遮罩层 */
$('s-box').onmouseleave = function(){
$('m-box').style.display = 'none';
$('b-box').style.display = 'none'
}
/* 遮罩层随鼠标移动 */
$('s-box').onmousemove = function(e){
e = e || window.event;
/* 获取鼠标在box盒子的相对坐标 */
var mouseX = e.pageX - $('box').offsetLeft;
var mouseY = e.pageY - $('box').offsetTop;
/* 遮罩层的坐标 鼠标在中间*/
var maskX = mouseX -$('m-box').offsetWidth / 2;
var maskY = mouseY - $('m-box').offsetHeight / 2;
/* 对mask的坐标进行判断 */
var smallX = maskX < 0 ? 0 : maskX;
var smallY = maskY < 0 ? 0 : maskY; //左上角,smallX为可移动距离
var MaxX = $('s-box').offsetWidth - $('m-box').offsetWidth;
var MaxY = $('s-box').offsetHeight - $('m-box').offsetHeight; //最大可移动距离
smallX = smallX > MaxX ? MaxX : smallX;
smallY = smallY > MaxY ? MaxY : smallY; //右下角
$('m-box').style.left = smallX + 'px';
$('m-box').style.top = smallY + 'px';
/* 让大图片跟随移动 */
/* 获取最大移动距离 */
var Maxx = $('b-box').offsetWidth - $('img').offsetWidth;
var Maxy = $('b-box').offsetHeight - $('img').offsetHeight;
/* 计算可移动距离 */
var bigX = smallX / MaxX * Maxx;
var bigY = smallY / MaxY * Maxy;
$('img').style.left = bigX + 'px';
$('img').style.top = bigY + 'px';
}
function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
js应用之放大镜
最新推荐文章于 2024-10-07 09:24:46 发布