JavaScript仿京东放大镜特效
更新时间：2021年10月28日 17:15:32 作者：杨蛋蛋~R
这篇文章主要为大家详细介绍了JavaScript仿京东放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript仿京东放大镜的具体代码，供大家参考，具体内容如下
功能需求：
1、分为三个模块
2、鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功能
3、黄色的遮挡层跟随着鼠标移动
4、移动黄色遮挡层，大图片跟随着移动
大图片移动距离=（遮挡层移动距离*大图片最大移动距离）/ 遮挡层最大移动距离
<style>
body,
div {
margin: 0;
padding: 0;
}
.product {
position: relative;
width: 400px;
height: 400px;
margin: 50px 0 0 20px;
border: 1px solid #000;
}
.preview_img img {
width: 300px;
height: 300px;
margin: 50px 50px;
}
.mask {
position: absolute;
display: none;
top: 20px;
left: 30px;
width: 80px;
height: 80px;
background-color: yellow;
opacity: 0.5;
cursor: move;
}
.big {
position: absolute;
display: none;
left: 410px;
top: 0;
width: 500px;
height: 500px;
z-index: 999;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
}
</style>
<!-- 引入js文件 -->
<script src="detail.js"></script>
</head>
<body>
<div class="product">
<div class="preview_img">
<img src="images/xs.jpg" alt="" />
<div class="mask"></div>
<div class="big">
<img src="images/xs.jpg" alt="" class="bigImg" />
</div>
</div>
</div>
</body>
JS页面
//页面预加载
window.addEventListener("load", function () {
var preview_img = document.querySelector(".preview_img");
var mask = document.querySelector(".mask");
var big = document.querySelector(".big");
//1.鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
preview_img.addEventListener("mouseover", function () {
mask.style.display = "block";
big.style.display = "block";
});
preview_img.addEventListener("mouseout", function () {
mask.style.display = "none";
big.style.display = "none";
});
//把鼠标坐标给遮挡层是不合适的，因为遮挡层坐标以父盒子为准
preview_img.addEventListener("mousemove", function (e) {
//（1）先计算出鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//（2）减去盒子高度宽度的一半
//（3）mask 移动的距离
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
//(4)如果坐标小于0 就让他停在 0 的位置(即超出盒子范围就停止)
var egdeX = preview_img.offsetWidth - mask.offsetWidth;
var egdeY = preview_img.offsetHeight - mask.offsetHeight;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= egdeX) {
maskX = egdeX;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= egdeY) {
maskY = egdeY;
}
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
//大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层的最大移动距离
var bigImg = document.querySelector(".bigImg");
//大图片最大移动距离
var bigMax = bigImg.offsetWidth - big.offsetWidth;
//大图片的移动距离 x y
var bigX = (maskX * bigMax) / egdeX;
var bigY = (maskY * bigMax) / egdeY;
bigImg.style.left = -bigX + "px";
bigImg.style.top = -bigY + "px";
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
生成器Generator是JavaScript ES6引入的特性，它让我们可以分段执行一个函数。但是在谈论生成器（Generator）之前，我们要先了解迭代器Iterator2022-08-08
众所周知正则表达式非常强大,下面这篇文章主要给大家介绍了关于如何使用js正则表达式验证文件夹名是否符合规范的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
javascript 获取所有id中包含某关键字的控件的实现代码
获取某容器控件中id包含某字符串的控件id列表2010-11-11
这篇文章主要介绍了JS实现淘宝支付宝网站的控制台菜单效果,涉及JavaScript基于时间函数及数学运算控制页面动画弹出菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
本文介绍了如何通过装饰器实现GET请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-10-10
web开发中，经常会使用验证码功能，例如登录、注册，或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码，感兴趣的朋友一起看看吧2017-06-06
最近项目经理交给我一下新项目，要实现关系图，需要在线条上绘制文字。下面小编把使用textPath实现线条上的文字功能分享到脚本之家平台供大家参考2017-12-12
这篇文章主要介绍了微信小程序跳转到其他网页(外部链接)的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Js,alert出现乱码问题的解决方法，需要的朋友可以参考一下2013-06-06
我们在做项目的时候，特别是注册用户的时候，基本上都需要有注册协议之类的东西，那么我们如何判断用户是否勾选了同意了此协议呢？2014-06-06
最新评论