优化原因
现在的电商商城项目解决的主要是购买商品的问题，那么购买商品主要要看清楚商品表面外形的主要特征和细节，如果图片处理过小，或者细节过于模糊，就需要做一个商品高清图片放大局部的功能。
技术关键点
1.左侧和上侧距离，在一个水平位置和垂直位置中有我们可以挪动的区域，就是原图片区域，鼠标挪动位置是一个块状位置，他的左侧和上侧距离浏览器上侧和左侧分别有一个长度，我们叫它们 ClientX 和 ClientY，而左上侧鼠标没有略过的位置实际上是一个点，我们拖动放大块时，它会由一个点变成一个方块，这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小，那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。在一个水平位置和垂直位置中有我们可以挪动的区域，就是原图片区域，鼠标挪动位置是一个块状位置，他的左侧和上侧距离浏览器上侧和左侧分别有一个长度，我们叫它们 ClientX 和 ClientY，而左上侧鼠标没有略过的位置实际上是一个点，我们拖动放大块时，它会由一个点变成一个方块，这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小，那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。
计算方式
x = 事件对象.clientX - 外侧盒子.offsetLeft;
Y = 事件对象.clientY - 外侧盒子.offsetTop;
2.解决如何鼠标在黄块内居中的问题，横纵位移分别加上放大黄块一半的长度和宽度。
计算方式
x = 事件对象.clientX - 外侧盒子.offsetLeft - 小黄.offsetWidth/2;
Y = 事件对象.clientY - 外侧盒子.offsetTop - 小黄.offsetHeight/2;
// 事件对象的 offsetX 和 offsetY
// 归属于事件对象
// 作用：关注的鼠标的坐标（鼠标相对于当前元素的坐标）
// 元素的 offsetLeft 和 offsetTop
// 归属于元素
// 作用：关注的元素的坐标（相对于offsetParent的坐标）
3. 小黄块的最大距离
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" > <!-- 小图 --> <img src="img/m.jpg" alt=""/> <!-- 小黄盒子 --> <div class="tool" ></div> </div> <!-- 右侧 --> <div class="rightBox" > <img 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;
}
