js实现放大镜详解
标签：
JavaScript
解决问题流程
分析： 通过现象看本质，原理是什么，涉及到什么东西，之间有什么联系 设计： 根据分析的结果，想想如何去实现，要搭什么样的页面 实现： 编码调试
原理
1、鼠标在小图上移动时，通过捕捉鼠标在小图上的位置，定位大图片的响应位置 2、放大镜的移动方向和大图片的移动方向，横向相反，纵向相反 #### 思路 1、页面元素 2、技术点：事件捕获，定位 onmouseover:会在鼠标指针移动到指定的对象上时发生 onmouseout:会在鼠标指针移出指定的对象时发生 onmosuemove:会在鼠标指针移动时发生 offsetLeft:子元素相对父元素的左边距离 offsetWidth:盒子的宽度，不报括滚动条 event.clientX:鼠标的X轴，相对于整个页面 3、难点：计算
<!doctype html><html><head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
;
}
#big-box img {
position: absolute;
z-index: 5
} </style>
<script>
/*
解决问题流程
分析：
通过现象看本质，原理是什么，涉及到什么东西，之间有什么联系
设计：
根据分析的结果，想想如何去实现，要搭什么样的页面
实现：
编码调试
*/
/*原理
1、鼠标在小图上移动时，通过捕捉鼠标在小图上的位置，定位大图片的响应位置
2、放大镜的移动方向和大图片的移动方向，横向相反，纵向相反
*/
/*
思路
1、页面元素
2、技术点：事件捕获，定位
onmouseover:会在鼠标指针移动到指定的对象上时发生
onmouseout:会在鼠标指针移出指定的对象时发生
onmosuemove:会在鼠标指针移动时发生
offsetLeft:子元素相对父元素的左边距离
offsetWidth:盒子的宽度，不报括滚动条
event.clientX:鼠标的X轴，相对于整个页面
3、难点：计算
*/
//页面加载完毕后执行
window. = function() { var objDemo = document.getElementById("demo"); var objSmallBox = document.getElementById("small-box"); var objMark = document.getElementById("mark"); var objFloatBox = document.getElementById("float-box"); var objBigBox = document.getElementById("big-box"); var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
objMark.onmouseover = function() {
objFloatBox.style.display = "block"
objBigBox.style.display = "block"
}
objMark.onmouseout = function() {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
} // 在onmousemove里，鼠标移动都会发生改变
objMark.onmousemove = function(ev) { var _event = ev || window.event; //兼容多个浏览器的event参数模式
// 鼠标的坐标 - demo.offsetLeft - 小图片容器 -放大镜宽度的一半
var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; /*这段代码时判断移出小盒子外的逻辑 start*/
// left移出为负数，我们让他等于0，固定住
if (left < 0) {
left = 0;
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
left = objMark.offsetWidth - objFloatBox.offsetWidth;
} if (top < 0) {
top = 0;
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
top = objMark.offsetHeight - objFloatBox.offsetHeight;
} /*这段代码时判断移出小盒子外的逻辑 end*/
objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
objFloatBox.style.top = top + "px"; // 设置大图片的
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}
} </script></head><body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/>
</div>
<div id="big-box">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/>
</div>
</div></body><!-- ie的兼容问题
1、图片上面是放大镜，放大镜上是鼠标
2、当鼠标在图片上的时候，会触发图片的mouseover事件，放大镜显示
3、放大镜显示，鼠标即在图片上，又在放大镜上，所以触发了图片的mouseout事件，让放大镜隐藏，又触发了mouseover事件，往复多次，就产生了bug
解决方案：
1、在图片和放大镜上放一个遮罩层，出发的是遮罩层事件
2、在ie中无法识别，遮罩层，需要给他加个背景，在进行透明的设置
--></html>
作者：jia林
链接：https://www.jianshu.com/p/278a3fa52a8d
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦