原生js实现放大镜效果

• html 代码

• js代码

window.onload=function(){
    //左侧图片元素
    var smallImg=document.getElementsByClassName('small_img')[0];
    //滑块元素
    var slide=document.getElementsByClassName('slide')[0];
    //右侧图片元素
    var bigImg=document.getElementsByClassName('big_img')[0];
    //图片
    var jane=document.getElementsByClassName('jane')[0];
    //针对左侧添加移入、移出事件
    //移入
    smallImg.onmousemove=function(event){
        //滑块显示
        slide.style.display="block";
        //大图显示
        bigImg.style.display="block";
        //e.clientX当前移入点的位置  - slide.offsetWidth/2=滑块距离左侧x的位置
        var left=event.clientX-slide.offsetWidth/2;
        //e.clientY当前移入点的位置  - slide.offsetHeight/2=滑块距离顶部y的位置
        var top=event.clientY-slide.offsetHeight/2;
        //最大移动的范围
        if(left<0){
            left=0;
        }else if(left>smallImg.offsetWidth-slide.offsetWidth){
            left=smallImg.offsetWidth-slide.offsetWidth;
        }
        if(top<0){
            top=0;
        }else if(top>smallImg.offsetHeight-slide.offsetHeight){
            top=smallImg.offsetHeight-slide.offsetHeight;
        }
        //给滑块的left和top值赋值
        slide.style.left=left+'px';
        slide.style.top=top+'px';
        //右侧图片赋值   *2的原因是两边的关系是1：2 刚好左边是右边的一半，所以右侧的图片必须是2倍的关系   
        //比例=大图：小图
        jane.style.left=-left*2+'px';
        jane.style.top=-top*2+'px';
        
    }
    //移出
    smallImg.onmouseout=function(){
        //滑块隐藏
        slide.style.display="none";
        //大图显示
        bigImg.style.display="none";
    }
}