脚本宝典收集整理的这篇文章主要介绍了前端必学——用JavaScript实现电商图片放大镜效果(附代码),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
前言
代码思想及代码实现
效果图展示
整体思想
HTML部分
CSS部分
JavaScript部分
完整代码
总结
放大镜可以说是前端人必须学会的程序之一!今天本美女就用京东距离为大家展示一下怎么实现放大镜的效果!相比较html和css而言,js更重要的就是你需要想明白程序的思想以及怎么一步步实现自己的想法,话不多说开整!
整个效果就是当鼠标放到展示图上的时候,会出现一个遮罩层以及弹出来一个框展示一个详情图,并且鼠标移动的时候详情图跟着移动,鼠标离开详情图消失。
主要是两个盒子:
<div class="box">
<img src="../img/ip.jpg" alt="">
<div class=";mask"></div>
</div>
<div class="big">
<img src="../img/ip10.jpg" alt="" class="img">
</div>
.box {
width: 450px;
height: 450px;
border: 1px solid #ccc;
float: left;/*设置浮动使得两个盒子在一排显示*/
posITion: relative;/*设置定位 根据自身情况可以改为绝对定位 */
margin: 10px;
}
.big {
width: 600px;
height: 600px;
overflow: hidden;/*超出部分隐藏*/
border: 1px solid #ccc;
position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
display: none;/*默认不显示 鼠标经过box时显示*/
}
.mask {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;/*在box类里面定位 层级高于展示图*/
top: 0px;
left: 0px;
opacity: .5;/*设置遮罩层的透明度*/
cursor: move;/*鼠标经过的时候变成十字拖动样式*/
display: none;/*默认不显示 鼠标经过box时显示*/
}
.img {
position: absolute;/*在big盒子里面绝对定位*/
/*JavaScript需要赋值需要设置top和left值*/
top: 0px;
left: 0px;
}
VAR mask = document.querySelector('.mask');
var box = document.querySelector('.box');
var big = document.querySelector('.big');
var img = document.querySelector('.img');
box.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
});
box.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
});
为了帮助更好的理解我在这里画了个图,e.pageY - box.offsetTop即可获得鼠标在box盒子里面的做坐标,我们把这个获取的鼠标值给遮罩层,但是直接将鼠标值给遮罩层会偏移需要调整;
我们把这个获取的鼠标值给遮罩层,但是直接将鼠标值给遮罩层会偏移需要调整到遮罩层中央;
//得到的x和y是鼠标在盒子内的坐标 this指向box
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//将获取到的鼠标的值给遮罩层(减去一半是因为让鼠标在遮罩层中央) 让它跟着鼠标移动
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
距离的计算box.offsetWidth - mask.offsetWidth即可得到可以移动的宽度值,box.offsetHeight - mask.offsetHeight即可得到可以移动的高度值;移动距离最小为0,最大不可以超过宽度值(高度值)。
//设置最大移动距离
var maskWidth = box.offsetWidth - mask.offsetWidth;
var maskHeight = box.offsetHeight - mask.offsetHeight;
//控制mask移动的范围
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskWidth) {
maskX = maskWidth;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskHeight) {
maskY = maskHeight;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
mask和详情图(大图)有一定的比例公式,转换之后就可以实现同步转换,但是需要注意方向会影响正负值。最后将计算出来的值赋给img的top和left。
//大图最大移动距离
var imgWidth = img.offsetWidth - big.offsetWidth;
var imgHeight = img.offsetHeight - big.offsetHeight;
//大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离
var bigX = maskX * imgWidth / maskWidth;
var bigY = maskY * imgHeight / maskHeight;
//赋值 注意方向相反取负值
img.style.left = (-bigX) + 'px';
img.style.top = (-bigY) + 'px';
<!DOCTYPE html>
<html lang="zn">
<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>京东放大镜</title>
<style>
.box {
width: 450px;
height: 450px;
border: 1px solid #ccc;
float: left; /*设置浮动使得两个盒子在一排显示*/
position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
margin: 10px;
}
.big {
width: 600px;
height: 600px;
overflow: hidden;/*超出部分隐藏*/
border: 1px solid #ccc;
position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
display: none;/*默认不显示 鼠标经过box时显示*/
}
.mask {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;/*在box类里面定位 层级高于展示图*/
top: 0px;
left: 0px;
opacity: .5;/*设置遮罩层的透明度*/
cursor: move;/*鼠标经过的时候变成十字拖动样式*/
display: none;/*默认不显示 鼠标经过box时显示*/
}
.img {
position: absolute;/*在big盒子里面绝对定位*/
/*JavaScript需要赋值需要设置top和left值*/
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/ip.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="../img/ip10.jpg" alt="" class="img">
</div>
<script>
var mask = document.querySelector('.mask');
var box = document.querySelector('.box');
var big = document.querySelector('.big');
var img = document.querySelector('.img');
box.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
});
box.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
});
box.addEventListener('mouSEMove', function (e) {
//得到的x和y是鼠标在盒子内的坐标 this指向box
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//将获取到的鼠标的值给遮罩层(减去一半是因为让鼠标在遮罩层中央) 让它跟着鼠标移动
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
//设置最大移动距离
var maskWidth = box.offsetWidth - mask.offsetWidth;
var maskHeight = box.offsetHeight - mask.offsetHeight;
//控制mask移动的范围
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskWidth) {
maskX = maskWidth;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskHeight) {
maskY = maskHeight;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//大图最大移动距离
var imgWidth = img.offsetWidth - big.offsetWidth;
var imgHeight = img.offsetHeight - big.offsetHeight;
//大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离
var bigX = maskX * imgWidth / maskWidth;
var bigY = maskY * imgHeight / maskHeight;
//赋值
img.style.left = (-bigX) + 'px';
img.style.top = (-bigY) + 'px';
});
</script>
</body>
</html>
家人们!收藏这篇博客以备不时之需,以后就不会担心放大镜效果不会做了!前端人前端魂,不会放大镜效果誓不为人!
放大镜效果总共分三步:
注意:千万不要把数据写死,要写成公式方便修改!
以上是脚本宝典为你收集整理的前端必学——用JavaScript实现电商图片放大镜效果(附代码)全部内容,希望文章能够帮你解决前端必学——用JavaScript实现电商图片放大镜效果(附代码)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。