day17 - javascript放大镜案例

style样式：
<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.box{
    width: 400px;
    height: 500px;
    margin-left:100px;
    /* border:3px solid #00f; */
}
.m{
    width: 400px;
    height: 400px;
    /* border:1px solid #000; */
    position: relative;
}
.small ul li{
    margin:0 5px;
    border:1px solid #0f0;
}
.small ul li img{
    vertical-align: middle;
}
.small ul{
    width: 400px;
    height: 100px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
}
.small ul li.active{
    border-color:#f00;
}
.shade{
    width: 100px;
    height: 100px;
    background:rgba(255,255,0,0.5);
    position: absolute;
    left:0;
    top: 0;
    display:none;
}
.big{
    width: 400px;
    height: 400px;
    position:absolute;
    left:105%;
    top:0;
    border:solid;
    background-image:url("./images/big1.jpg");
    background-size:1600px 1600px;
    display:none;
    background-repeat:no-repeat;
}
.middle{
    width: 400px;
    height: 400px;
    border:1px solid #000;
    position:absolute;
    left:0;
    top:0;
}
.shade:hover{
    cursor:move;
}
/*
比例：
中等图和遮罩的比例 === 大图和大盒子的比例
400/100 === 1600/400
*/
</style>

body代码：
<!-- 有导航，有内容，有顶部 -->
<div style="height:300px;background:red;"></div>
<div class="box">
    <div class="m">
        <div class="middle">
            <img src="./images/middle1.jpg" alt="">
            <div class="shade"></div>
        </div>
        <div class="big"></div>
    </div>
    <div class="small">
        <ul>
            <li class="active"><a href="#"><img src="./images/small1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/small2.jpg" alt=""></a></li>
        </ul>
    </div>
</div>

js代码：
// 遮罩在中等图片上移动过的距离/中等图片 === 大图移动的距离/大图
// 遮罩在中等图上向右移动了   中图1/4
// 大图就应该想左移动   大图的1/4


// 先做鼠标放到中等盒子上，遮罩和大盒子显示
function Enlarge(classname){
    // 将需要操作的元素都获取成对象属性
    this.box = document.querySelector("."+classname);
    this.m = this.box.querySelector(".m");
    this.middleImg = this.box.querySelector(".m img");
    this.middle = this.box.querySelector(".middle");
    this.shade = this.box.querySelector(".shade");
    this.ulis = this.box.querySelectorAll("ul li");
    this.big = this.box.querySelector(".big");
    var _this = this;
    // 绑定事件
    this.middle.onmouseenter = ()=>{
        this.over();
    }
    this.middle.onmouseleave= ()=>{
        // console.log(456);
        this.out();
    }
    // 点击小图的事件
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].onclick = function(){
            _this.click(this);
        }
    }
}
// 定义点击小图方法
Enlarge.prototype.click = function(ele){
    // 将所有li的红框去掉
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].style.borderColor = "#0f0"
    }
    // 给自己加红框
    ele.style.borderColor = "#f00";
    // 需要切换对应的中等图片
    // 先获取当前点击的li中的图片的路径
    // 先找到小图片这个标签
    var smallImg = ele.firstElementChild.firstElementChild;
    // 通过这个标签的src找路径 - src属性获取
    var smallPath = smallImg.getAttribute("src");
    // './images/small2.jpg'
    // str.slice(开始下标);
    // 点最后一次出现的位置
    var lastIndex = smallPath.lastIndexOf(".");
    // 根据点的位置截取数字以及后面的扩展名
    var suffix = smallPath.slice(lastIndex-1);
    // 拼接中等图片的路径
    var middlePath = "./images/middle" + suffix;
    // 给中等图片的img标签设置src属性
    this.middleImg.setAttribute("src",middlePath);
    // 设置大图的路径
    var bigPath = "./images/big"+suffix;
    // 设置给大盒子的背景
    this.big.style.backgroundImage = "url("+bigPath+")"
}
// 定义鼠标离开中的图片上的方法
Enlarge.prototype.out = function(){
    this.shade.style.display = "none"
    this.big.style.display = "none"
}
// 定义鼠标放到中等图片上的方法
Enlarge.prototype.over = function(){
    // console.log(123);
    this.shade.style.display = "block"
    this.big.style.display = "block"
    var _this = this;
    // 需要一个鼠标移动事件
    this.middle.onmousemove=function(e){
        // 拖拽- 需要获取光标位置
        var e = e || window.event;
        var x = e.pageX;
        var y = e.pageY;
        // console.log(x,y);
        var l = x - _this.box.offsetLeft - this.offsetLeft - _this.shade.offsetWidth/2;
        if(l<=0){
            l=0;
        }
        if(l>=this.clientWidth - _this.shade.offsetWidth){
            l=this.clientWidth - _this.shade.offsetWidth
        }
        _this.shade.style.left = l + "px";
        var t = y - _this.box.offsetTop - this.offsetTop - _this.shade.offsetHeight/2;
        if(t<=0){
            t = 0;
        }
        if(t>=this.clientHeight - _this.shade.offsetHeight){
            t=this.clientHeight - _this.shade.offsetHeight
        }
        _this.shade.style.top = t + "px";
        // 大图也跟着移动
        _this.fangda(l,t);
    }
}
Enlarge.prototype.fangda = function(l,t){
    // 需要计算移动过的比例
    // 遮罩距离左边的距离 - l
    // 大图的宽度
    var w = this.middle.clientWidth;
    // 比例就是 l/w;
    var percentw = l/w;
    // 根据这个比例计算大图的left值
    // 这个比例就应该等于 大图的left/大图的宽度（大图宽度设置过背景大小）
    // 获取背景大小
    var style = window.getComputedStyle(this.big).backgroundSize;
    // 获取到的是宽px 高px组成的一个字符串 ，需要使用空格分隔获取到具体的宽和高
    var bigW = parseInt(style.split(" ")[0]);
    // 大图的left就是比例 * 大图的宽
    var bigL = percentw * bigW;


    // 高度
    var h = this.middle.clientHeight;
    var percenth = t/h;
    var bigH = parseInt(style.split(" ")[1]);
    var bigT = percenth * bigH;
    // 需要设置给背景的定位
    this.big.style.backgroundPosition = `-${bigL}px -${bigT}px`;
}
var enlarge = new Enlarge("box");
// 1.遮罩的位置一定要在光标位置基础上 - 外面盒子左边的间距
// 2.如果有滚动条，光标位置就使用pageX pageY
// 3.放大镜，咱们讲的使用的是3套图，小、中、大，但是放大镜可以使用一套图来做 - 如果使用小图放大会模糊，大图缩小不模糊 - 一定要找大图去做