JavaScript 面向对象编程 编写放大镜
作者：互联网
-
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