用JS写出JS事件中京东图片放大特效

图片放大特效

准备两张相同的图片，小图和大图。

小图显示在商品的展示区域。

大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。

编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。

当鼠标在小图上移动时，显示鼠标的遮罩和大图。

当鼠标移动时，让遮罩跟着在小图中进行移动。

限定遮罩在小图中的可移动范围。

根据遮罩在小图中的覆盖范围，按比例的显示大图。

CSS页面代码：

 <style >* {margin: 0;padding: 0;}.goods{margin: 200px;width: 350px;position: relative;}.goods-small{position: relative;}.small-mask{display: none;width: 200px;height: 200px;opacity: .5;background:#fad73d;cursor: move;position: absolute;z-index: 9;}.small-img{display: block;}.goods-big{display: none;width: 500px;height: 500px;position: absolute;overflow: hidden;left: 360px;top: 0;z-index: 9;}.big-img {position: absolute;}.show {display: block;}</style>

HTML页面代码：

 <div class="goods"><div class="goods-small"><div class="small-mask"></div><img class="small-img"src="https://img14.360buyimg.com/n1/jfs/t1/132972/1/6982/99132/5f3795a7E4f8c5006/02114b2aa52af6c8.jpg.avif" alt=""></div><div class="goods-big"><img class="big-img"src="https://img14.360buyimg.com/n1/s546x546_jfs/t1/132972/1/6982/99132/5f3795a7E4f8c5006/02114b2aa52af6c8.jpg.avif" alt=""></div></div>

JS页面代码：

<script>function getEleByClass(classname){return document.getElementsByClassName(classname)[0];}let _small_box=getEleByClass('goods-small');let _big_box=getEleByClass('goods-big');let _mask=getEleByClass('small-mask');let _goods=getEleByClass('goods');let _big_img=getEleByClass('big-img');// 给小图片添加鼠标移入事件_small_box.onmouseover=function(){_mask.classList.add('show');_big_box.classList.add('show');}// 给小图片添加鼠标移出事件_small_box.onmouseout=function(){_mask.classList.remove('show');_big_box.classList.remove('show');}// 监听小图片内的鼠标移动事件_small_box.onmousemove=function(e){let _pageX=e.pageX,_pageY=e.pageY,_mouseX=_pageX-_goods.offsetLeft,_mouseY=_pageY-_goods.offsetTop;let _mask_style = window.getComputedStyle(_mask, null);let _maskX=_mouseX-parseInt(_mask_style.width)/2;let _maskY=_mouseY-parseInt(_mask_style.height)/2;// 遮罩边界限定 不允许超出if(_maskX<0){_maskX=0;}let diff_width=_small_box.offsetWidth-_mask.offsetWidth;if(_maskX>diff_width){_maskX=diff_width;}if(_maskY<0){_maskY=0;}let diff_height=_small_box.offsetHeight-_mask.offsetHeight;if(_maskY>diff_height){_maskY=diff_height;}_mask.style.left=_maskX+'px';_mask.style.top=_maskY+'px';// 大图片移动的范围值let _big_moveRX=_big_img.offsetWidth-_big_box.offsetWidth;let _big_moveRY=_big_img.offsetHeight-_big_box.offsetHeight;// 计算遮罩移动 1px 大图需要移动的距离比例值let _ratioX=_big_moveRX/diff_width;let _ratioY=_big_moveRY/diff_height;// 计算大图移动的值let _big_moveX=_ratioX*_maskX;let _big_moveY=_ratioY*_maskY;// 大图移动方向与遮罩移动方向相反_big_img.style.left=-_big_moveX+'px';_big_img.style.top=-_big_moveY+'px';}</script>

运行结果如图：

因为图移动是动态的，截图无法展现出来，如有需要自行运行查看结果。

用JS写出JS事件中京东图片放大特效相关推荐

[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
【C 语言】文件操作 ( 学生管理系统 | 命令行接收数据填充结构体 | 结构体写出到文件中 | 查询文件中的结构体数据 )
文章目录一.学生管理系统二.代码示例一.学生管理系统前两篇博客 [C 语言]文件操作 ( 将结构体写出到文件中并读取结构体数据 | 将结构体数组写出到文件中并读取结构体数组数据 ) [C 语言 ...
将JSON对象带有格式的写出到文件中
需求:将一个JSON对象写出到文件中,要求文件中的JSON数据带有简单的格式.代码的实现参考了Java算法中的栈处理括号匹配问题.好了,不多说了,下面是代码的实现. 代码: 1 package gem ...
js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
用原生JavaScript写出类似jQuery中slideUp和slideDown效果
JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言.由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正. 前言在我自学 ...
js ...运算符_「 giao-js 」用js写一个js解释器
前言在这篇文章中,我们将通过 JS 构建我们自己的 JS 解释器,用 JS 写 JS,这听起来很奇怪,尽管如此,这样做我们将更熟悉 JS,也可以学习 JS 引擎是如何工作的! 什么是解释器 (Int ...
js获取UEditor文本编辑器中的图片地址
写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容:2.将获取到的字符串转换成jquery对象:3.选择器找到img元素,获取src值. var content= UE.get ...
Flink 使用Table Api 读取文件数据并写出到文件中
前言在上一篇我们演示了如何使用Flink 的Table Api 读取文件数据,并过滤特定字段的数据,本篇在上一篇的基础上,将从CSV文件中读取的数据重新输出到一个新的CSV文件中: 在实际业务场景下 ...
java矢量图_你见过js画出这样的矢量图以及动画特效吗？
js 画出几十种矢量图 raphaeljs 超炫丽的动画效果 3.动态曲线图 ---- js 画图 raphaeljs demo http://raphaeljs.com/analytics.ht ...

用JS写出JS事件中京东图片放大特效

用JS写出JS事件中京东图片放大特效相关推荐

最新文章

热门文章