js 放大镜效果

js 面向对象实现放大镜效果

放大镜

效果分析

组成结构分析

一个容器大盒子 - div.box
一个放中等图片的盒子 - div.middleBox
- 一张中等图片
- 一个遮罩 - div.shade
一个放小图片的盒子 - div.smallBox
- 两张小图
一个放大图的盒子 - div.bigBox

布局分析

大盒子box设置相对定位
中等盒子middleBox设置相对定位
遮罩shade设置绝对定位在中等盒子中，隐藏
放大图的盒子bigBox设置绝对定位，定位到大盒子box的右边，大图作为放大图的盒子的背景

效果分析

点击小图片，大图随着小图更换
鼠标移动大中等盒子上
- 遮罩出现，并可以在中等盒子上移动
- 遮罩移动的过程中大盒子的背景图也跟随移动
鼠标离开大盒子
- 遮罩隐藏，放大图的盒子也隐藏，并将移动事件注销

规律分析

中等盒子和遮罩的比例，是大图和放大图的盒子的比例
遮罩移动过的距离和中等盒子的比例，是大图移动的距离和大图的比例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜</title>
</head>
<style>
*{margin: 0;padding: 0;}
.box{
    margin: 100px 300px;
    width: 402px;
    height: 464px;
    position: relative;
}
.middle{
    width: 400px;
    height: 400px;
    border: 1px blue solid;
    position: relative;
}
.middle img{
    width: 400px;
    height: 400px;
}
.small{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.small img{
    border: 1px solid black;
    cursor: pointer;
}
.small .active{
    border: rgb(252, 51, 51) 2px solid;
    box-shadow: rgb(236, 86, 111) 2px 1px 5px;
}
.big{
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 450px;
    background: url(img/0.jpg) no-repeat;
    background-size: 1600px 1600px;
    border: 1px solid springgreen;
    display: none;
}
.shade{
    position:absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 0, 0.3);
    cursor: pointer;
    display: none;
}
</style>
<body>
<div class="box">
    <div class="middle">
        <img src="img/0.jpg" alt="">
        <div class="shade"></div>
    </div>
    <div class="small">
        <img src="img/0.jpg" alt="" width="50px" class="active">
        <img src="img/1.jpg" alt="" width="50px">
        <img src="img/2.jpg" alt="" width="50px">
        <img src="img/3.jpg" alt="" width="50px">
        <img src="img/4.jpg" alt="" width="50px">
        <img src="img/5.jpg" alt="" width="50px">
    </div>
    <div class="big">

    </div>
</div>
</body>
<script type="text/javascript">
function Fang(classname){   // 定义需要用到的属性及变量
    this.box = document.querySelector(classname);
    this.middle = this.box.querySelector(".middle");
    this.Mimg = this.box.querySelector(".middle>img");
    this.shade = this.box.querySelector(".shade");
    this.imgs = this.box.querySelectorAll(".small img");
    this.small = this.box.querySelector(".small");
    this.big = this.box.querySelector(".big");
}
Fang.prototype.init = function(){     // 初始化函数
    // 给所有的小图片绑定单击事件
    for(let i = 0;i<this.imgs.length;i++){
        this.imgs[i].onclick = ()=>{
            this.Click(i);
        }
    }
    // 给中等盒子绑定鼠标移入事件
    this.middle.onmouseover = ()=>{
        this.shade.style.display = "block";
        this.big.style.display = "block";
        // 给中等盒子添加鼠标移动事件
        this.middle.onmousemove = e=>{
            this.Sha(e);
            this.move();
        }
    }
    // 中等盒子鼠标移出事件
    this.middle.onmouseout = ()=>{
        this.shade.style.display = "none";
        this.big.style.display = "none";
    }
}

Fang.prototype.Click = function(i){     // 点击图片对应路径
    for(var j = 0;j<this.imgs.length;j++){
        this.imgs[j].className = "";
    }
    this.imgs[i].className = "active";  //选中 框变红
    var Ssrc = this.imgs[i].getAttribute("src");    //获取小图片路径

    /* 三个尺寸不一样的相同图片 */
    // var index = Ssrc.lastIndexOf(".");
    // var cut = Ssrc.slice(index-1);  // 获取 3.jpg
    // var Msrc = "img/"+cut;  // 拼接 middle里图片路径
    // this.Mimg.setAttribute("src",Msrc); //设置middle图片
    // var Bsrc = "img/"+cut;
    // this.big.style.backgroundImage = `url("${Bsrc}")`;

    /* 使用一个图片，容易失真 */
    this.Mimg.setAttribute("src",Ssrc); // 设置middle图片
    this.big.style.backgroundImage = `url(${Ssrc})`;    // 设置big图片
}

Fang.prototype.Sha = function(e){   // 遮罩层移动
    var e = e || window.event;
    var x = e.pageX;     
    var y = e.pageY;
    var l = x - this.box.offsetLeft - this.shade.offsetWidth/2;
    var t = y - this.box.offsetTop - this.shade.offsetHeight/2;
    if(l<=0){
        l = 0;
    }
    if(l>=this.middle.clientWidth-this.shade.offsetWidth){
        l = this.middle.clientWidth-this.shade.offsetWidth;
    }
    if(t<=0){
        t = 0;
    }
    if(t>=this.middle.offsetHeight-this.shade.offsetHeight-2){
        t = this.middle.offsetHeight-this.shade.offsetHeight-2;
    }
    this.shade.style.left = l + "px";
    this.shade.style.top = t + "px";
}

Fang.prototype.move = function(){   // 移动比例
    //遮罩在中等盒子移动比例: 移动距离/中等盒子尺寸
    var xper = this.shade.offsetLeft/this.middle.clientWidth;
    var yper = this.shade.offsetTop/this.middle.clientHeight;

    // 背景图移动的比例 : 比例*背景图的尺寸;
    var backsize = getStyle(this.big,"background-size");
    var xback = parseFloat(backsize.split(" ")[0]) * xper;
    var yback = parseFloat(backsize.split(" ")[1]) * yper;
    this.big.style.backgroundPosition = `-${xback}px -${yback}px`;
}

var a = new Fang(".box"); 
a.init();
function getStyle(ele,attr){    // 设置样式
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}
</script>
</html>