javascript实现商品图片放大镜


Posted in Javascript onNovember 28, 2019

优化原因

现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能。

技术关键点

1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小,那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小,那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。

计算方式

x = 事件对象.clientX - 外侧盒子.offsetLeft;
Y = 事件对象.clientY - 外侧盒子.offsetTop;

javascript实现商品图片放大镜

javascript实现商品图片放大镜

2.解决如何鼠标在黄块内居中的问题,横纵位移分别加上放大黄块一半的长度和宽度。

计算方式

x = 事件对象.clientX - 外侧盒子.offsetLeft - 小黄.offsetWidth/2;
Y = 事件对象.clientY - 外侧盒子.offsetTop - 小黄.offsetHeight/2;
// 事件对象的 offsetX 和 offsetY
// 归属于事件对象
// 作用:关注的鼠标的坐标(鼠标相对于当前元素的坐标)
// 元素的 offsetLeft 和 offsetTop
// 归属于元素
// 作用:关注的元素的坐标(相对于offsetParent的坐标)

javascript实现商品图片放大镜

3. 小黄块的最大距离

javascript实现商品图片放大镜

4.用preventDefault阻止事件冒泡

简易实现代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="base.css" rel="external nofollow" />
</head>
<body>
 <div class="w">
 <div class="fdj">
 <!-- 左侧 -->
 <div class="leftBox" id="_leftBox">
 <!-- 小图 -->
 <img src="img/m.jpg" alt=""/>
 <!-- 小黄盒子 -->
 <div class="tool" id="_tool"></div>
 </div>
 <!-- 右侧 -->
 <div class="rightBox" id="_rightBox">
 <img id="_bImg" src="img/b.jpg" alt=""/>
 </div>
 </div>
 </div>
 <!-- 引入的外部js程序文件 -->
 <script src="index.js"></script>
</body>
</html>
* {
 margin:0;
 padding:0;
}

.w {
 width: 1190px;
 margin: 0 auto;

}
.fdj {
 margin-top: 20px;
}

.fdj .leftBox {
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;
 float: left;
 position: relative;
 overflow: hidden;
}

.fdj .tool {
 width: 250px;
 height: 250px;
 background:gold;
 opacity:.5;
 filter:alpha(opacity=50);
 position: absolute;
 top:0;
 left: 0;
 cursor: move;
 /* 默认隐藏 */
 display: none;

}
/* 给小黄加上active 就会显示 */
.fdj .tool.active {
 display: block;
}

.fdj .rightBox {
 width: 500px;
 height: 500px;
 border:1px solid #ccc;
 float: left;
 overflow: hidden;
 /* 隐藏 */
 display: none;
 position: relative;
}
/* 加上active表示显示 */
.fdj .rightBox.active {
 display: block;
}

.fdj .rightBox img {
 position: absolute;
}
//【准备:获取要操作的元素】
var _leftBox = document.querySelector('#_leftBox'); // 左侧盒子
var _tool = document.querySelector('#_tool'); // 小黄盒子
var _rightBox = document.querySelector('#_rightBox'); // 右侧盒子
var _bImg = document.querySelector('#_bImg'); // 右侧盒子中的大图片


//【功能1:鼠标进入/离开左侧盒子显示/隐藏小黄和右侧盒子】
// 1. 给_leftBox注册鼠标进入事件 onmouseenter
_leftBox.onmouseenter = function () {
 // 1.1 显示小黄盒子,给小黄盒子添加类名 active
 _tool.className = 'tool active';
 // 1.2 显示右侧盒子,给右侧盒子添加类名 active 
 _rightBox.className = 'rightBox active';

}

// 2. 给_leftBox注册鼠标离开事件 onmouseleave
_leftBox.onmouseleave = function () {
 // 2.1 显示小黄盒子,给小黄盒子去除类名 active
 _tool.className = 'tool';
 // 2.2 显示右侧盒子,给右侧盒子去除类名 active
 _rightBox.className = 'rightBox';
}

//【功能2:鼠标在左侧区域移动时,控制小黄和右侧盒子中图片的位置】
// 1. 给左侧盒子注册鼠标移动事件 onmosuemove
_leftBox.onmousemove = function (e) {
 // 2. 通过事件对象获取鼠标相对元素的位置(x,y)
 var x = e.clientX - _leftBox.offsetLeft- _tool.offsetWidth/2;
 var y = e.clientY - _leftBox.offsetTop - _tool.offsetHeight/2;

 // 这里给x和y赋值时,不要用事件对象的offsetX和offsetY。
 // 原因:因为【事件冒泡】,鼠标在移动时,有时会移动到小黄盒子上。若移动到小黄盒子上时,获取的值不是相对于左侧盒子元素,而是相对小黄盒子元素。所以当鼠标进入或离开小黄时,获取的坐标值时大时小,导致小黄盒子上下左右波动。
 // 解决方案:在小黄移动事件中,停止冒泡。但是鼠标在移动时,就没有效果了。
 // 最终解决方案:放弃使用事件对象offsetX/Y。 选择事件对象的clienX/Y 结合左侧盒子的位置计算出正确的位置。

 // 2.1 对x和y限制
 if (x < 0) {
 x = 0;
 }
 if (y < 0) {
 y = 0;
 }
 if (x > _leftBox.offsetWidth - _tool.offsetWidth) {
 x = _leftBox.offsetWidth - _tool.offsetWidth;
 }
 if (y > _leftBox.offsetHeight - _tool.offsetHeight) {
 y = _leftBox.offsetHeight - _tool.offsetHeight;
 }

 // 3. 把计算好的位置 赋值给小黄 
 _tool.style.left = x + 'px';
 _tool.style.top = y + 'px';

 // 4. 设定右侧大图片的位置(设置的方向是相反的,比例关系是1:2)
 _bImg.style.left = -2 * x + 'px';
 _bImg.style.top = -2 * y + 'px';
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
jquery移动节点实例
Jan 14 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
浅析JS异步加载进度条
May 05 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
JS 事件机制完整示例分析
Jan 15 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 #Javascript
javascript实现弹幕墙效果
Nov 28 #Javascript
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
微信小程序事件流原理解析
Nov 27 #Javascript
JS实现简单省市二级联动
Nov 27 #Javascript
Angular value与ngValue区别详解
Nov 27 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python实现二分查找算法
2020/09/18 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
铁路安全事故反思
2014/04/26 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android