在JavaScript中实现商品图片的局部放大（放大镜）

对商品实现放大镜效果其实是拖拽事件的拓展。
在电商网站等购买东西的时候，我们经常会预览左侧商品展示图片，把鼠标放到原图，右侧就会有个大图显示出细节。本文将带领大家写一个这样简单的功能！
实现原理：
当鼠标移入某一图片内部时，图片上部会出现一个类似于扫描的框，这个框内的图片部分，会以方大形式展示在右边，如下图：

完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#small {width: 130px;height: 130px;float: left;margin: 100px;position: relative;}#moveBox {width: 60px;height: 40px;background: rgba(255, 0, 0, 0.2);position: absolute;top: 0;cursor: all-scroll;display: none;}/*130/60 == 800/?*/#big {width: 369px;height: 246px;border: 1px solid blue;overflow: hidden;position: relative;top: 100px;left: 500px;display: none;}#big img {position: absolute;}</style><script></script>
</head><body><div id="small"><img src="small.jpg" alt=""><div id="moveBox"></div></div><div id="big"><img src="big.jpg" alt="" id="img"></div><script>var small = document.getElementById('small');var smJ = small.querySelector('img');var bigImg = document.getElementById('img');var moveDiv = document.getElementById('moveBox');var oBig = document.getElementById('big');//鼠标进入small.onmouseenter = function () {moveDiv.style.display = 'block';oBig.style.display = 'block';};//鼠标离开small.onmouseleave = function () {moveDiv.style.display = 'none';oBig.style.display = 'none';};//鼠标移动moveDiv.onmousemove = function (e) {e = e || window.event;var x = e.clientX - small.offsetLeft - moveDiv.offsetWidth / 2;var y = e.clientY - small.offsetTop - moveDiv.offsetHeight / 2;//边界问题if (x < 0) {x = 0;}if (x > small.offsetWidth - moveDiv.offsetWidth) {x = small.offsetWidth - moveDiv.offsetWidth;}if (y < 0) {y = 0;}if (y > small.offsetHeight - moveDiv.offsetHeight) {y = small.offsetHeight - moveDiv.offsetHeight;}moveDiv.style.left = x + 'px';moveDiv.style.top = y + 'px';//比例 = 大图移动的距离/moveDiv移动的距离 = 大图/小图var scale = bigImg.offsetWidth / smJ.offsetWidth;bigImg.style.marginLeft = -scale * x + 'px';bigImg.style.marginTop = -scale * y + 'px';};</script>
</body></html>

在JavaScript中实现商品图片的局部放大（放大镜）相关推荐

同时复制保存汇奇思百货多个商品图片
汇奇思百货商品平民化的价格,这里不少的百货商品,都很受欢迎呢,但是它们的商品图片是如何保存到呢?下面一起来用下图高手来试试吧. 打开下图高手,将"自动粘贴网址"打勾起来,并在下图选 ...
商品详情页html代码获取,直播带货小程序源码中，商品详情页是如何获取html图片的...
在搭建直播带货小程序源码过程中,需要为商品构建详情页,而商品页中的图片是要通过html获取并展示到本地的,那么这个过程是如何实现的?接下来小编将通过代码演示一下: 1.配置webView mWebVi ...
java script的图片隐藏,java和javascript中过滤掉img形式的字符串不显示图片的方法...
本文实例讲述了java和javascript中过滤掉img形式的字符串不显示图片的方法.分享给大家供大家参考.具体实现方法如下: 1. javascript过滤掉和形式的字符串复制代码代码如下: 过 ...
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节查看作业目录需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
JavaScript中的图片处理与合成(一)
JavaScript中的图片处理与合成(一) 引言: 图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求.实际前端业务中,也经常会有很多的项目需要用到图片加工和处理.由于过去一段时间 ...
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
如何通过点击商品详情下方的加入购物车按钮,将商品信息加入到个人购物车下?如何阻止重复加入同一个商品到购物车?如何在删除购物车中的商品时,重点提示?后端的数据库如何设计来保证加入的商品在当前用户下? 前 ...
vue3,电商项目中的商品详情-图片预览组件
目的:完成商品图片预览功能和切换分享一个vueuse的插件useMouseInElement useMouseInElement的官方文档 // 监听DOM元素 target 绑定的DOM元素中鼠标 ...
一键获取网页中的全部图片并批量下载（国内淘宝天猫京东网站+国外商品页面）——亲测有效
上周六的时候,有个朋友找到我,需要将网页中的图片全部下载下来,而且还不能改变图片的大小: 作为一个前端,经常跟html打交道,我深知页面中肯定是有图片链接的网页中下载少量图片的方法举例说明网页中图 ...
html 点击收藏效果,收藏Javascript中常用的55个经典技巧
收藏Javascript中常用的55个经典技巧更新时间:2007年08月12日 15:39:21 作者: 1. οncοntextmenu="window.event.returnVa ...

在JavaScript中实现商品图片的局部放大（放大镜）

在JavaScript中实现商品图片的局部放大（放大镜）相关推荐

最新文章

热门文章