标签：function box style span sBox 放大镜 JavaScript 面向对象编程 Magnifier
-
OOA:
放大镜，等比例移动
选择元素
绑定事件
进入
显示
离开
隐藏
移动
遮罩层跟随鼠标移动
边界限定
计算移动的距离占了总距离的比例
根据比例，设置右侧图片的位置 -
OOD:
function Magnifier(){
// 1. 选择元素
// 2. 绑定事件
}
Magnifier.prototype.addEvent = function(){
// 进入事件
// 3. 显示
// 离开事件
// 4. 隐藏
// 移动事件
// 5. 跟随移动功能，计算比例，设置位置
}
Magnifier.prototype.show = function(){
// 显示
}
Magnifier.prototype.hide = function(){
// 隐藏
}
Magnifier.prototype.move = function(){
// 移动
// 计算比例
// 设置
} -
oop:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cont{width:1000px;margin: 0 auto;}
.cont::after{content: "";width:0;height:0;overflow: hidden;clear: both;display: block;}
.small_box{width:200px;height:300px;float: left;position: relative}
.small_box img{width:200px;height:300px;}
.small_box span{background: rgba(0,0,255,0.7);display: block;position: absolute;left: 0;top:0;display: none}
.big_box{width:200px;height:300px;float: left;display: none;overflow: hidden;margin-left: 100px;position: relative;}
.big_box img{width:400px;height:600px;position: absolute;left:0;top:0;}
</style>
</head>
<body>
<div class="cont">
<div class="small_box">
<img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefined&cs=1091405991,859863778&os=1114394393,554371559&simid=3296715954,119998854&pn=0&rn=1&di=205040&ln=1187&fr=&fmq=1613552244469_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&hs=2&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fa1.att.hudong.com%252F62%252F02%252F01300542526392139955025309984.jpg%26refer%3Dhttp%253A%252F%252Fa1.att.hudong.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1616144243%26t%3Da1e2b24e87aa1429d2131860aca3d868&rpstart=0&rpnum=0&adpicid=0&force=undefined" alt="">
<span></span>
</div>
<div class="big_box">
<img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefined&cs=1091405991,859863778&os=1114394393,554371559&simid=3296715954,119998854&pn=0&rn=1&di=205040&ln=1187&fr=&fmq=1613552244469_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&hs=2&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fa1.att.hudong.com%252F62%252F02%252F01300542526392139955025309984.jpg%26refer%3Dhttp%253A%252F%252Fa1.att.hudong.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1616144243%26t%3Da1e2b24e87aa1429d2131860aca3d868&rpstart=0&rpnum=0&adpicid=0&force=undefined" alt="">
</div>
</div>
</body>
<script>
function Magnifier(){
// 1. 选择元素
this.sBox = document.querySelector(".small_box");
this.span = document.querySelector(".small_box span");
this.bBox = document.querySelector(".big_box");
this.bImg = document.querySelector(".big_box img");
// 2. 绑定事件
this.addEvent();
}
Magnifier.prototype.addEvent = function(){
var that = this;
// 进入事件
this.sBox.onmouseover = function(){
// 3. 显示
that.show()
}
// 离开事件
this.sBox.onmouseout = function(){
// 4. 隐藏
that.hide();
}
// 移动事件
this.sBox.onmousemove = function(eve){
var e = eve || window.event;
// 5. 跟随移动功能，计算比例，设置位置
that.move(e);
}
}
Magnifier.prototype.show = function(){
// 显示
this.span.style.display = "block";
this.bBox.style.display = "block";
// 计算右侧显示图片的比例
// 向日葵班：总人30人，出来12人干活
// 玫瑰班：总人42人，要求出同向日葵班的人数的比例的人数，干活
// 玫瑰班要出的人数 = (向日葵12人 / 向日葵30人) * 玫瑰班42人
this.span.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth) * this.sBox.offsetWidth + "px";
this.span.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight) * this.sBox.offsetHeight + "px";
// 提前获取各种尺寸，方便使用
this.sBoxW = this.sBox.offsetWidth;
this.sBoxH = this.sBox.offsetHeight;
this.sBoxL = this.sBox.offsetLeft;
this.sBoxT = this.sBox.offsetTop;
this.spanW = this.span.offsetWidth;
this.spanH = this.span.offsetHeight;
this.bBoxW = this.bBox.offsetWidth;
this.bBoxH = this.bBox.offsetHeight;
this.bImgW = this.bImg.offsetWidth;
this.bImgH = this.bImg.offsetHeight;
}
Magnifier.prototype.hide = function(){
// 隐藏
this.span.style.display = "none";
this.bBox.style.display = "none";
}
Magnifier.prototype.move = function(e){
// 计算要移动的距离
var l = e.clientX - this.sBoxL - this.spanW/2;
var t = e.clientY - this.sBoxT - this.spanH/2;
// 边界限定
if(l<0) l=0;
if(t<0) t=0;
if(l>this.sBoxW-this.spanW) l=this.sBoxW-this.spanW;
if(t>this.sBoxH-this.spanH) t=this.sBoxH-this.spanH;
// 移动
this.span.style.left = l + "px";
this.span.style.top = t + "px";
// 计算比例
var x = l / (this.sBoxW-this.spanW);
var y = t / (this.sBoxH-this.spanH);
// 设置给右侧图片的位置
this.bImg.style.left = x * -Math.abs(this.bImgW - this.bBoxW) + "px";
this.bImg.style.top = y * -Math.abs(this.bImgH - this.bBoxH) + "px";
}
new Magnifier;
</script>
</html>
标签：function,box,style,span,sBox,放大镜,JavaScript,面向对象编程,Magnifier 来源： https://blog.csdn.net/weixin_48065262/article/details/113835598
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。