放大镜"/>
用面向对象语法写个放大镜
相信大家都买过东西吧，在查看产品详情的时候鼠标放在商品图片上会有一个放大效果，今天做的就是这个效果
首先分析一下：
// "放大"镜：等比例移动
// 1. 选择元素
// 2. 补全布局：js获取不到页面上设置了display:none的元素的尺寸
// 3. 绑定事件
// 进入：
// 4. 显示对应元素
// 离开
// 5. 隐藏对应元素
// 移动
// 6. 设置span的跟随鼠标
// 7. 计算比例
// 8. 根据比例计算右侧大图移动的距离
// 设计：
// class Magnifier{
// constructor(){
// // 选择元素
// this.init();
// this.addEvent();
// }
// init(){
// // 补全布局
// }
// addEvent(){
// // 进入
// this.over()
// // 离开
// this.out()
// // 移动
// this.move()
// }
// move(){
// // 设置span位置,计算比例,根据比例计算位置
// }
// over(){
// // 显示对应元素
// }
// out(){
// // 隐藏对应元素
// }
// }
下面我们来看代码：
基本布局和css：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.small-box{width:400px;height:300px;float: left;position: relative;margin:50px;}.small-box img{width: 400px;height:300px;}.small-box span{background: rgba(200,200,200,0.6);position: absolute;left:0;top:0;display: none;}.small-box p{margin: 0;width: 100%;height:100%;position: absolute;z-index: 1;left:0;top:0;}.large-box{width:400px;height:300px;overflow: hidden;float: left;display:none;position: relative;}.large-box img{width: 1200px;height:900px;position: absolute;}</style>
</head>
<body><div class="small-box"><img src="img/1.jpg" alt=""><span></span><p></p></div><div class="large-box"><img src="img/1.jpg" alt=""></div>
下面是js代码：
<script>class Magnifier{constructor(){// 选择元素this.sBox = document.querySelector(".small-box");this.span = this.sBox.getElementsByTagName("span")[0];this.lBox = document.querySelector(".large-box");this.lImg = this.lBox.children[0];// this.init();this.addEvent();}init(){// 补全布局// span的尺寸// 根据大图在右侧框中的比例，计算// span的比例 = 右侧图的宽 / y右侧框的宽// span的宽 = 左侧框的框 / span的比例this.span.style.width = this.sBox.offsetWidth / (this.lImg.offsetWidth / this.lBox.offsetWidth) + "px";this.span.style.height = this.sBox.offsetHeight / (this.lImg.offsetHeight / this.lBox.offsetHeight) + "px";}addEvent(){var that = this;// 进入this.sBox.onmouseover = function(){that.over()}// 离开this.sBox.onmouseout = function(){that.out()}// 移动this.sBox.onmousemove = function(eve){var e = eve || window.event;that.move(e);}}move(e){// 设置span位置// this.span.style.left = e.clientX - this.sBox.offsetLeft + "px";// this.span.style.top = e.clientY - this.sBox.offsetTop+ "px";// span的边界限定var l = e.offsetX - this.span.offsetWidth/2;var t = e.offsetY - this.span.offsetHeight/2;if(l<0) l=0;if(t<0) t=0;if(l> this.sBox.offsetWidth-this.span.offsetWidth){l = this.sBox.offsetWidth-this.span.offsetWidth}if(t> this.sBox.offsetHeight-this.span.offsetHeight){t = this.sBox.offsetHeight-this.span.offsetHeight}// 设置span的位置this.span.style.left = l + "px";this.span.style.top = t + "px";// 计算比例var x = l / (this.sBox.offsetWidth-this.span.offsetWidth);var y = t / (this.sBox.offsetHeight-this.span.offsetHeight);// console.log(x, y)// 根据比例计算位置this.lImg.style.left = (this.lBox.offsetWidth - this.lImg.offsetWidth) * x + "px";this.lImg.style.top = (this.lBox.offsetHeight - this.lImg.offsetHeight) * y + "px";}over(){// 显示对应元素this.span.style.display = "block";this.lBox.style.display = "block";// 补全布局this.init();}out(){// 隐藏对应元素this.span.style.display = "none";this.lBox.style.display = "none";}}new Magnifier();</script>
</body>
</html>
下面是见证奇迹的时刻，效果展示：
更多推荐
用面向对象语法写个放大镜
发布评论