JavaScript实现放大镜效果
在浏览一些购物网站时,我们经常会看到那种鼠标悬浮时,侧边出现放大的细节图的效果。下边是一个简单的图片放大镜效果实现过程。
效果展示
HTML部分
主要分为小图片、遮罩层和大图片;主要注意它们的位置关系。
<body>
<div class="preview">
<div class="preview_img">
<!-- 小图片 -->
<img src="6.jpg" alt="">
<!-- 小图片上的遮罩层 -->
<div class="mask"></div>
</div>
<div class="big">
<!-- 大图片 -->
<img src="6.jpg" alt="" class="bigImg">
</div>
</div>
</body>
CSS部分
因为遮罩层与大图片是当鼠标移入时显示的,所以一开始设置它们的display为none;并且它们都是位于其他元素上方的,为其添加绝对定位,设置index,让它们显示在最上方。
*{
margin: 0;
padding: 0;
}
.preview_img {
width: 500px;
height: 300px;
border: 1px solid #ccc;
position: absolute;
margin: 20px 20px;
}
.preview_img img {
width: 100%;
height: 100%;
}
.mask {
display: none;/*初始隐藏*/
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #fede4f;
opacity: .5;/*设置遮罩层半透明*/
cursor: move;/*鼠标位于遮罩层时显示为移动图标*/
}
.big {
display: none;/*初始隐藏*/
position:absolute;
width: 750px;
height: 450px;
background: pink;
left: 540px;
top: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position:absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
}
JavaScript部分
js部分分为三部分:
1、鼠标移入小盒子时显示;
2、鼠标移出小盒子时隐藏;
3、鼠标在小盒子内移动遮罩层和大图片产生相应的反应。
window.addEventListener("load",function(){
//分别获取小图片盒子、遮罩层和大图片盒子
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 当鼠标经过小盒子时就显示遮罩层和大图片盒子
preview_img.addEventListener('mousemove',function(){
mask.style.display = "block";
big.style.display = "block";
});
//当鼠标离开小盒子时就隐藏遮罩层和大图片盒子
preview_img.addEventListener('mouseout',function(){
mask.style.display = "none";
big.style.display = "none";
});
// 鼠标移动的时候让mask跟着小盒子走
preview_img.addEventListener('mousemove',function(e){
// 计算出鼠标在盒子内的坐标
// pageX,Y可以获取到鼠标在文档中的位置,
// this.offsetLeft可以获取当前元素的偏移值
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 使用鼠标在盒子内的坐标减去遮罩层的一半,就是遮罩层的最终位置
var maskX = x - mask.offsetWidth/2;
var maskY = y - mask.offsetHeight/2;
//分别计算出遮罩层X轴与Y轴的最大移动距离
var maskMaxX =preview_img.offsetWidth - mask.offsetWidth;
var maskMaxY =preview_img.offsetHeight - mask.offsetHeight;
//将遮罩层的移动距离限制在小图片盒子内
if(maskX <= 0){
maskX = 0;
}else if(maskX >= maskMaxX){
maskX = maskMaxX;
}
if(maskY <= 0){
maskY = 0;
}else if(maskY >= maskMaxY){
maskY = maskMaxY;
}
//将遮罩层的移动距离给它的定位值,达到随鼠标移动的效果
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
// 关键算法:大图片的移动距离= mask的移动距离 * 大图片的最大移动距离 / mask的最大移动距离
//获取大图
var bigImg = document.querySelector('.bigImg');
// 大图片的最大移动距离
var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
// 大图片的移动距离
var bigX = maskX * bigMaxX / maskMaxX;
var bigY = maskY * bigMaxY / maskMaxY;
//大图片一定是往反方向移动,所以设置负值
bigImg.style.left = -bigX + "px";
bigImg.style.top = -bigY + "px";
});
});
此案例使用的是长方形盒子,仅供参考。