利用javascript 完成放大镜效果

利用javascript完成放大镜
1.完成css布局，布局方式可以凭个人喜好方式编写

2.利用面向对象思想，首先第一步我们要针对small图片进行单击事件，可以利用事件委托判断对象，也可以利用数组，给每一个small图片添加单击事件

// 点击小图的时候要修改中图，和大图
Enlarge.prototype.click = function(ele){
    // 将所有li的红框去掉，给当前点击的li添加样式
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].style.borderColor = "#0f0"
    }
    ele.style.borderColor = "#f00";
    var smallImg = ele.firstElementChild.firstElementChild;
    // 通过这个标签的src找路径 - src属性获取
    var smallPath = smallImg.getAttribute("src");
    // 点最后一次出现的位置，根据点的位置截取数字以及后面的扩展名
    var lastIndex = smallPath.lastIndexOf(".");
    var suffix = smallPath.slice(lastIndex-1);
    // 拼接中等图片的路径，给中等图片的img标签设置src属性
    var middlePath = "./images/middle" + suffix;
    this.middleImg.setAttribute("src",middlePath);
    // 设置大图的路径，并且切换图片
    var bigPath = "./images/big"+suffix;
    this.big.style.backgroundImage = "url("+bigPath+")"
}

3.给中图添加移入移出事件，当移入时，显示遮罩，以及大图，计算出遮罩与中图的比例，再将比例，用于大图盒子和大图，通过比例计算移动距离，
计算鼠标与窗口距离是使用pageX pageY，便于以后引入时，不会因为上部，左部，有内容而导致，鼠标距离出错，可以利用箭头函数获得this，也可以定义变量继承this，变量名为that即可

Enlarge.prototype.out = function(){
    this.shade.style.display = "none"
    this.big.style.display = "none"
}
// 定义鼠标放到中等图片上的方法
Enlarge.prototype.over = function(){
    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);
    }
}

4.通过之前计算的遮罩与中图的距离，然后作为参数传入大盒子背景图片移动方法，获得比例，然后进行位置移动，利用模板字符串赋值给大图background-position属性

Enlarge.prototype.fangda = function(l,t){
	// 比例就是 l/w;
    var w = this.middle.clientWidth;
    var percentw = l/w;
    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`;
}

5，封装函数内获取的变量

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);
        }
    }
}
// 创建调用对象
var enlarge = new Enlarge();