js仿京东放大镜
更新时间：2022年07月03日 14:37:34 作者：阿旋要毕业~
这篇文章主要为大家详细介绍了js仿京东放大镜，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js仿京东放大镜的具体代码，供大家参考，具体内容如下
1.实现效果：
移动遮挡框，右边的图片响应的放大并移动。
2.实现思路：
（1）鼠标移动到图片上，遮罩层和右边盒子显示。鼠标移出，遮罩层和右边盒子消失。
（2）黄色遮罩层跟随鼠标移动
（3）右边图片跟随左边图片移动
注意：右边图片的移动方向与左边遮罩层的移动方向相反，因此，右边图片移动距离是负的。
右边大盒子：多余的图片不显示，用overflow:hidden.来隐藏
3.代码展示
<!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>仿京东放大镜案例</title>
<style>
body {
padding: 0;
margin: 0;
}
.preview {
position: relative;
float: left;
width: 400px;
height: 300px;
}
.small {
width: 400px;
height: 300px;
}
.mask {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-color: rgba(199, 211, 91, 0.3);
cursor: move;
}
.big {
display: none;
position: absolute;
top:0px;
left:410px;
background-color: thistle;
width: 600px;
height: 500px;
z-index: 999;
overflow: hidden;
/* 超过图片的部分会隐藏 */
}
.bigImg {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class = "preview">
<img class = "small" src="bg2.jpg" alt="">
<div class="mask"></div>
<div class="big"><img class = "bigImg" src="bg2.jpg" alt=""></div>
</div>
<script>
var mask = document.querySelector('.mask');
var preview = document.querySelector('.preview');
var big = document.querySelector('.big');
preview.addEventListener('mousemove', function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 找到鼠标在盒子内的坐标。
var new_x = x-mask.offsetWidth/2;
var new_y = y - mask.offsetHeight/2;
// 限制黄色盒子的坐标。不能移动到盒子外。最大运动坐标：盒子宽（高）-遮罩层宽（高）；最小运动坐标0
if(new_x > this.offsetWidth - mask.offsetWidth) {
new_x = this.offsetWidth - mask.offsetWidth;
} else if(new_x < 0) {
new_x = 0;
}
if(new_y > this.offsetHeight - mask.offsetHeight) {
new_y = this.offsetHeight - mask.offsetHeight;
} else if(new_y < 0) {
new_y = 0;
}
mask.style.left = new_x+ 'px';
mask.style.top = new_y + 'px';
// 大盒子的运动像素，应该按照小盒子运动的一定比例来运动。
// 公式：遮挡层移动距离 / 最大移动距离 = 大图片移动距离 / 最大移动距离
// 所以：大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离。
var bigImg = document.querySelector('.bigImg');
var big = document.querySelector('.big');
// 遮罩层最大移动距离x
var maskMax_x = this.offsetWidth - mask.offsetWidth;
// 大图片最大移动距离x
var bigMax_x = bigImg.offsetWidth - big.offsetWidth;
// 大图片的移动距离x
var bigX = new_x * bigMax_x / maskMax_x;
// 遮罩层最大移动距离y
var maskMax_y = this.offsetHeight - mask.offsetHeight;
// 大图片最大移动距离y
var bigMax_y = bigImg.offsetHeight - big.offsetHeight;
// 大图片的移动距离y
var bigY = new_y * bigMax_y / maskMax_y;
bigImg.style.left = -bigX+ 'px';
bigImg.style.top = -bigY + 'px';
});
preview.addEventListener('mouseover', function() {
big.style.display = 'block';
mask.style.display = 'block';
});
preview.addEventListener('mouseout', function() {
big.style.display = 'none';
mask.style.display = 'none';
});
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript类型系统之Window对象，整理关于Window对象的学习笔记，感兴趣的小伙伴们可以参考一下2016-01-01
html 5.0的canvas可以获取到图片的像素点了。这样，我们可以做很多以图片有关的操作和渲染了。当然今后也会给浏览器渲染引擎更高的要求。（YY, 什么时候html渲染引擎也支持多核和GPU呢？）2009-04-04
在项目开发过程中经常会遇到数组中包含很多重复的内容，即脏数据去脏的操作，本文着重讲解了数组去重的几种方法。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了微信小程序实现跑马灯效果完整代码(附效果图)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要给大家介绍了关于Echart折线图手柄触发事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
使用JSX 建立 Markup 组件风格开发的示例（前端组件化）
这篇文章主要介绍了使用JSX 建立 Markup 组件风格开发的示例（前端组件化）本文重点讲解如何从0搭建一个组件系统，在这里我们会学习使用JSX来建立markup 的风格，我们基于与React 一样的 JSX 去建立我们组件的风格2021-04-04
TextRange是用来表现HTML元素中文字的对象，是一个用于处理JavaScript对象文本部分内容的一个对象2014-07-07
这篇文章主要介绍了JavaScript数组去重的3种方法和代码实例,本文直接给出实例代码,需要的朋友可以参考下2015-07-07
Next.js使用getServerSideProps进行服务器端渲染demo
这篇文章主要为大家介绍了Next.js使用getServerSideProps进行服务器端渲染demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最近因为工作需要，弄了好多天的js了，老婆一问我在弄 ajax, 一问我在弄js，她都听得没有一点兴趣了，我自己感觉还好，毕竟做出来了东西就有成就感吧，这里把几个有用但是不常见的东西贴出来供大家参考参考2009-02-02
最新评论