图片局部放大

实现鼠标移到图片上可以实现局部放大的效果

---

实现原理

实际上不是局部放大，而是有两张图片，一张大的和一张小。
小的图片就是样本，而大的图片就是所谓的放大所看见的图。
通过判断鼠标位置来显示大图片的局部位置，来实现图片放大的效果。

步骤

首先是布局，在这里布局我就不细说了，
大致就是将小图片展示出来，大图片隐藏起来，
然后将大图片外层的div加一个超出部分隐藏，

然后用脚本的代码让大图片根据你鼠标相对于小图片的位置调整大图片的位置使大图片指定位置显示。

代码块

实际案例代码
ps：有点懒，只放了脚本代码
例如：

over(e){
    this.boole=true  //改变放大后的图片显示状态
    //使鼠标处于图片中遮罩层的中间位置
    let x=e.pageX-75  //鼠标x坐标位置-遮罩层的一半
    let y=e.pageY-75  //鼠标y坐标位置-遮罩层的一般
    //使遮罩层跟随鼠标改变位置
    let cc=Math.min(Math.max(155,x),520);//两个值一个是距离左边最小值一个是最大值
    let ee=Math.min(Math.max(270,y),470);//两个值一个是距离上边最小值一个是最大值
    this.$refs.smboxdome.style.left=cc+"px"//给遮罩层x坐标赋值
    this.$refs.smboxdome.style.top=ee+"px"//给遮罩层x坐标赋值
    //最后一步就是调整大图片位置，具体需要看情况，所以这里 还是要自己实验
    let mg=this.$refs.smboxdome.style.left.slice(0,3)
    let mgtop=this.$refs.smboxdome.style.top.slice(0,3)
    let  xx=(mg-104)/480*660
    let yy=(mgtop-220)/360*392
    this.$refs.bigimg.style.marginLeft = -xx+70+"px";
    this.$refs.bigimg.style.marginTop = -yy+55+"px";
},
out(){
    this.boole=false
},

注意事项！！！

1.寻找鼠标位置一定要相对于页面
2.根据鼠标位置改变图片位置一定要用mousemove事件因为要实时改变图片位置，那就要一直触发事件，所以要用mousemove事件
3.一定要用mouseout事件把大图片最后隐藏
4.上面的是vue代码，但是js也可以用，但是主要把语法都改一改

ps:

第一次写博客，希望各位大佬嘴下留情，但是有什么意见也希望大佬们指出来我好改正

---