原生js实现放大镜效果

前端小白成长记

于 2018-11-08 14:13:22 发布

阅读量136

点赞数 1

本文链接：https://blog.csdn.net/zh18338723836_/article/details/83859106

版权

仿照电商的商品放大图做出了这个放大镜的效果。具体的实现案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        #box{display: flex;flex-flow: row;}
        .small_pic{width: 400px;height:400px;position: relative;border: 1px solid #000; }
        .small_img{width:400px;height: 400px;}
        .slider{display: none;width:200px;height: 200px;background: rgba(255,255,255,.5);position: absolute;cursor: pointer;}
        .big_pic{display: none;width: 400px;height: 400px;overflow: hidden;position: relative;margin-left: 20px;border: 1px solid #000;}
        .big_img{width:800px;height: 800px;position: absolute;left: 0;top: 0;}
    </style>
</head>
<body>
<div id="box">
    <!--左侧-->
    <div class="small_pic">
        <img src="src/bg.jpg" alt="" class="small_img">
        <div class="slider"></div>
    </div>
    <!--右侧-->
    <div class="big_pic">
        <img src="src/bg.jpg" alt="" class="big_img">
    </div>
</div>
</body>
</html>
<script>
    function $(selector) {
        return document.querySelector(selector)
    }

    var small_pic=$('.small_pic');
    var slider=$('.slider');
    var big_pic=$('.big_pic');
    var big_img=$('.big_img');
    //移入
    small_pic.οnmοusemοve=function (ev) {
        slider.style.display='block';
        big_pic.style.display='block';
        var left=ev.clientX-slider.offsetWidth/2;
        var top=ev.clientY-slider.offsetHeight/2;
        //移动范围
        var w=small_pic.offsetWidth-slider.offsetWidth;
        var h=small_pic.offsetHeight-slider.offsetHeight;
        if(left<0){
            left=0
        }else if(left>w){
            left=w;
        }
        if(top<0){
            top=0
        }else if(top>h){
            top=h;
        }
        slider.style.left=left+'px';
        slider.style.top=top+'px';
        big_img.style.left=-(left*2)+'px';
        big_img.style.top=-(top*2)+'px';
    }
    // 移除
    small_pic.οnmοuseοut=function () {
        slider.style.display='none';
        big_pic.style.display='none';
    }
</script>