js实现放大镜效果
思路:先让mask块和bigImg块、big块隐藏,当鼠标经过pre_img就显示遮罩层mask和big块,获取鼠标当前的位置,根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果大概思路实现图:html + css 代码:<!DOCTYPE html><html><head><meta charset=
·
思路:
先让mask块和bigImg块、big块隐藏,当鼠标经过pre_img就显示遮罩层mask和big块,获取鼠标当前的位置,根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果
html + css 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入js文件 -->
<script src="js/放大镜.js" ></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
width: 100%;
height: 100%;
}
.pre_img{
position: relative;
width: 200px;
height: 200px;
margin: 100px;
border: 1px solid #ccc;
}
.mask{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color:#FEDE4F;
opacity: .6;/* 设置透明度 */
cursor: move;
display: none;
}
.big img{
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
.big{
overflow: hidden;
display: none;
position: absolute;
left: 200px;
top: 0;
width: 250px;
height: 250px;
border: 1px solid #ccc;
z-index: 999;
}
</style>
</head>
<body>
<div class="pre_img">
<img src="img/jd.jpg" >
<div class="mask"></div>
<div class="big">
<img src="img/jd.jpg" class="bigImg">
</div>
</div>
</body>
</html>
js 代码:
window.addEventListener('load',function(){//一定要先写这个(先加载完html)
var pre_img = document.querySelector('.pre_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//1、当鼠标经过pre_img就显示遮罩层mask和big
pre_img.addEventListener('mouseover',function(){
mask.style.display = 'block';
big.style.display = 'block';
})
pre_img.addEventListener('mouseout',function(){
mask.style.display = 'none';
big.style.display = 'none';
})
//2、计算鼠标在盒子内的坐标
pre_img.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//让鼠标处于mask的正中央
var maskX = x - mask.offsetWidth/2;
var maskY = y - mask.offsetHeight/2;
// 让遮罩层只能在盒子内移动
var maskMax = pre_img.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.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//根据等比例放大
//3、大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离
var bigImg = document.querySelector('.bigImg');
//大图移动距离
var bigX = maskX * 500 / 200;//大图/小图
var bigY= maskY * 500 / 200;
//大图的移动(方向相反,取负值)
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)