网络编程

javascript实现商品图片放大镜
网络编程 2025/5/11 佚名
3 2

优化原因

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

技术关键点

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="/UploadFiles/2021-04-02/m.jpg">





* {
 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';
}





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js商品图片放大镜,js图片放大镜,js放大镜
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“javascript实现商品图片放大镜”

暂无“javascript实现商品图片放大镜”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
岱庙资源网 Copyright www.zgmyg.com