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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
Python isinstance函数介绍
2015/04/14 Python
python安装以及IDE的配置教程
2015/04/29 Python
python在每个字符后添加空格的实例
2018/05/07 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python切割图片的示例
2020/11/12 Python
python3中确保枚举值代码分析
2020/12/02 Python
美国家具网站:Cymax
2016/09/17 全球购物
AC Lens:购买隐形眼镜
2017/02/26 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
优秀员工演讲稿
2019/06/21 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js