JavaScript仿京东放大镜效果
更新时间：2021年10月27日 10:14:25 作者：今天会下雨吗
这篇文章主要为大家详细介绍了JavaScript仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码，供大家参考，具体内容如下
案例分析
- 整个案例可以分为三个功能模块
- 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
- 黄色的遮挡层跟随鼠标功能。
- 移动黄色遮挡层，大图片跟随移动功能。
- 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
- 就是显示与隐藏
- 移动黄色遮挡层，大图片跟随移动功能，大图片的移动距离要跟黄色遮挡层的比例相等。
- 求大图片的移动距离公式
代码
<!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>
.preview_wrap {
width: 400px;
height: 400px;
}
.preview_img {
position: relative;
height: 398px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #FEDE4F;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 410px;
top: 0;
width: 500px;
height: 500px;
background-color: pink;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
/* 要给图片加了绝对定位，才可以设置 left top */
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="preview_wrap">
<div class="preview_img">
<img src="images/s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="images/big.jpg" alt="" class="bigImg">
</div>
</div>
</div>
<script>
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';
})
// 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
preview_img.addEventListener('mousemove', function(e) {
// (1). 先计算出鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x, y);
// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
// (3) 我们mask 移动的距离
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4) 如果x 坐标小于了0 就让他停在0 的位置
// 遮挡层的最大移动距离
var maskMax = preview_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 bigMax = bigIMg.offsetWidth - big.offsetWidth;
// 大图片的移动距离 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigIMg.style.left = bigX + 'px';
bigIMg.style.top = bigY + 'px';
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于WPS的JS宏操作方法总结的相关资料,WPS是一款常用的办公软件,其中的JS宏功能可以帮助用户实现自动化操作和批量处理等需求,需要的朋友可以参考下2023-09-09
用js实现的客户端即可实现md5值的代码，一般情况下都是后台语言才有的，客户端也有了，方便有需要的朋友了。2011-02-02
这篇文章主要介绍了JavaScript变量作用域及内存问题,结合实例形式分析了javascript全局变量、局部变量、块级作用域等概念及内存优化问题相关操作技巧,需要的朋友可以参考下2019-06-06![Bootstrap 中data-[*] 属性的整理](//img.jbzj.com/images/xgimg/bcimg3.png)
本文给大家收藏整理了关于Bootstrap 中data-[*] 属性的相关知识，感兴趣的朋友一起看看吧2018-03-03
这篇文章主要介绍了e2e测试之cypress的使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要针对Bootstrap布局组件应用进行实例讲解，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了JS for循环中i++ 和 ++i的区别介绍的相关资料,需要的朋友可以参考下2016-07-07
下面小编就为大家带来一篇JS转换HTML转义符的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了如何利用JavaScript实现简单的3D立方体自动旋转的效果，文中的实现代码讲解详细，感兴趣的可以尝试一下2022-06-06
Node的优势我就不再乱吹捧了，它让javascript统一web的前后台成为了可能。但是对于新手来说，server端的JS代码可能不像client端的代码那么好调试，直观。client端JS代码的调试基本上经历了一个从“肉眼--alert()--firebug(或者其它的developer tools)”的一个过程。而对于server端的调试，可能新手仍然停留在使用“肉眼--console()”的阶段。其实，Node经过了这么多年（虽然才短短几年）的发展，也有了很多不错的第三方的调试工具。包括Node内建的调试工具debugger、node-inspector等。2014-05-05
![Bootstrap 中data-[*] 属性的整理](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论