商品图片放大镜的JavaScript实现

html代码

<div id="content"><div id="box"><img src="imgs/1-large.jpg" class="middle"><div id="filter"></div></div><div id="max"><img src="imgs/1-large.jpg" id="maxImg"></div><div><img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg"><img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg"><img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg"><img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg"><img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg"></div>
</div>

css代码

  * {margin: 0;padding: 0;}#content {position: relative;}#box {width: 400px;height: 400px;border: 1px solid #000;position: relative;}#box > img {width: 400px;height: 400px;}#filter {width: 200px;height: 200px;background: #000;opacity: 0.6;position: absolute;left: 0;top: 0;display: none;cursor: move;}.small {margin: 0 10px;border: 1px solid #fff;}.small:hover {border-color: #000;}#max {position: absolute;left: 430px;top: 0;width: 400px;height: 400px;overflow: hidden;}#maxImg {width: 800px;height: 800px;position: absolute;left: 0;top: 0;}

JS代码

 /*建议 小方块 中图  以及大图的比例是 1:2:4*/var aSmall = document.querySelectorAll(".small");var omiddle = document.querySelector(".middle");var oBox = document.getElementById("box");var oFilter = document.getElementById("filter");var maxImg = document.getElementById("maxImg");for (var i = 0; i < aSmall.length; i++) {aSmall[i].onmouseover = function () {var src = this.getAttribute("data-url");omiddle.src = src;maxImg.src = src;}}/放大镜//maxImg.style.display = "none";oBox.onmouseover = function () {maxImg.style.display = "block";oFilter.style.display = "block";this.onmousemove = function (e) {var e = e || event;var l = e.clientX - oFilter.offsetWidth / 2;var t = e.clientY - oFilter.offsetHeight / 2;l = l >= oBox.offsetWidth - oFilter.offsetWidth ? l = oBox.offsetWidth - oFilter.offsetWidth : (l <= 0 ? l = 0 : l = l);t = t >= oBox.offsetHeight - oFilter.offsetHeight ? t = oBox.offsetHeight - oFilter.offsetHeight : (t <= 0 ? t = 0 : t = t);oFilter.style.left = l + 'px';oFilter.style.top = t + 'px';maxImg.style.left = -2 * l + 'px';maxImg.style.top = -2 * t + 'px';}};oBox.onmouseout = function () {oFilter.style.display = "none";maxImg.style.display = "none";}

商品图片放大镜的JavaScript实现相关推荐

用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能一.前言二.图示淘宝商品放大镜效果三.需要掌握的知识点四.放大镜实现原理五.放大镜代码及注释六.放大镜最终成果七.放大镜源码八.总结一.前言今天翻阅文件夹看到了之前写 ...
vue-element-admin 简单实现仿淘宝实现商品图片放大镜效果
1.HTML <template><div v-loading="Loading" class="goodsUpload"><!- ...
商品图片放大镜的前端案例
优化原因现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能. 技术关键点 ...
电商网站商品图片放大镜实现
2019独角兽企业重金招聘Python工程师标准>>> 提供两种实现方式. ① margin-left.margin-top方式实现. ②clip方式实现. 事件统一使用委托机制,即 ...
在JavaScript中实现商品图片的局部放大（放大镜）
对商品实现放大镜效果其实是拖拽事件的拓展. 在电商网站等购买东西的时候,我们经常会预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 实现原理: 当 ...
javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
仿京东商城商品图片缩略图+放大镜效果
Jquery包文件及样式下载具体效果可参考京东商城商品图片展示第一步:需要导入Jquery包文件和样式文件(放在<head></head>中间): <script s ...
【小5聊】纯javascript实现图片放大镜效果
实现图片放大镜效果,其实就是一个比例放大的效果以下通过纯javascript方式对图片进行等比例放大,等比倍数和出界判断可自行实现文章后面会附上全部代码放大镜效果 1. 放大镜组成 1)目标图 ...
基于vue商品图片轮播和放大镜的方案
实现原理放大镜的原理用一句话概括,就是根据小图上的鼠标位置去定位大图. 原理图(以2倍放大为例) 相信原理图已经画的很明白了, 图中,左侧框是小图框,其蓝色区域为图片遮罩层(需放大区域),右侧框是整 ...

商品图片放大镜的JavaScript实现

商品图片放大镜的JavaScript实现相关推荐

最新文章

热门文章