js模仿jd商品放大镜
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js模仿jd商品放大镜相关的知识，希望对你有一定的参考价值。
思路：
1.利用定位把遮挡盒子与放大图片的盒子写出来，并且利用display：none隐藏起来
2.获取鼠标在盒子内的坐标，
3.设置遮挡盒子在盒子移动，并设置超出盒子是隐藏遮挡盒子
4.利用等比例算法 投射出右边的大图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.prve_img
width: 400px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
position: relative;
.mask
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #ccc;
background-color: yellow;
/* 半透明效果 */
opacity: .5;
cursor: crosshair;
.big
display: none;
position: absolute;
top: -1px;
left: 400px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: pink;
overflow: hidden;
.big img
position: absolute;
top: 0;;
left: 0;
</style>
<script>
window.addEventListener('load',function()
//1.鼠标经过盒子的时候，显示出两个盒子
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var prveimg = document.querySelector('.prve_img');
var bigImg = document.querySelector('.bigImg');
//绑定一个鼠标经过事件
prveimg.addEventListener('mouseover',function()
mask.style.display = 'block';
big.style.display = 'block';
);
prveimg.addEventListener('mouseout',function()
mask.style.display = 'none';
big.style.display = 'none';
);
//2.获取鼠标在盒子内移动时坐标
prveimg.addEventListener('mousemove',function(event)
var x = event.pageX - prveimg.offsetLeft;
var y = event.pageY - prveimg.offsetTop;
//限制黄色盒子的移动距离
//让光标定到盒子的中间
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
//盒子最大的移动移动距离
var maskMax = prveimg.offsetWidth - mask.offsetWidth;
if(maskX <= 0)
maskX = 0;
else if( maskX >= maskMax)
maskX = maskMax;
if(maskY <= 0)
maskY = 0;
else if(maskY >= maskMax)
maskY = maskMax;
//让mask盒子动起来
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//mask的移动距离 / mask的最大移动距离 = bigMig的移动距离 / big的最大移动距离
//big的最大移动距离
//这里图片比盒子大用图片的尺寸去见
//盒子是正方形 所有可以共用最大移动巨鹿
var bigImgMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = bigImgMax * maskX / maskMax;
var bigY = bigImgMax * maskY / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
)
)
</script>
</head>
<body>
<div class="prve_img">
<img src="img/s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="img/big.jpg" alt="" class="bigImg">
</div>
</div>
</body>
</html>
以上是关于js模仿jd商品放大镜的主要内容，如果未能解决你的问题，请参考以下文章