【原生JS】简单放大镜效果

最新推荐文章于 2024-07-12 21:49:18 发布

邹大叔

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量2.9k

点赞数 3

分类专栏：小工具文章标签： javascript

小工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

演示地址：点我

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            img{
                vertical-align: top;
            }
            .fdj {
                width: 350px;
                height: 350px;
                position: relative;
                margin: 100px auto;
                border: 1px solid gainsboro;
            }
            .small {
                position: relative;
            }
            .small img {
                width: 350px;
            }
            .mask {
                width: 100px;
                height: 100px;
                background: rgba(255, 255, 0, 0.4);
                position: absolute;
                left: 0;
                top: 0;
                cursor: move;
                display: none;
            }
            .big {
                position: absolute;
                top: 0;
                left: 360px;
                width: 500px;
                height: 500px;
                border: 1px solid gainsboro;
                overflow: hidden;
                display: none;
            }
            .big img{
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>

    <body>
        <div class="fdj">
            <div class="small">
                <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
                <div class="mask"></div>
            </div>
            <div class="big">
                <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var fdj = document.querySelector('.fdj') // 获得最大的盒子
        var small = document.querySelector('.small'); //获取小图片盒子
        var big = document.querySelector('.big'); //获取大图片盒子
        var bigs = big.children[0] //大图片 
        var smalls = small.children[0] //小图片
        var mask = small.children[1]; //遮罩 

        //鼠标移入小图片盒子
        small.onmouseover = function() {
            //鼠标移入图片盒子将遮罩与大图片显示
            mask.style.display = 'block';
            big.style.display = ' block';
        };

        //鼠标移出小图片盒子
        small.onmouseout = function() {
            //鼠标移出小图片盒子将遮罩与大图片隐藏
            mask.style.display = 'none';
            big.style.display = 'none';
        };

        var x=0;
        var y=0;
        //鼠标在小图片上移动时
        small.onmousemove = function(ev) {
            var ev = event || window.event;
        //让鼠标在遮罩正中
            //鼠标X坐标与Y坐标
            x = ev.clientX -this.offsetParent.offsetLeft- mask.offsetWidth / 2 ;  
            y = ev.clientY -this.offsetParent.offsetTop- mask.offsetHeight / 2 ;
            //将遮罩限制在小图片盒子中

            if (x<0) {
                x=0;
            }else if(x>small.offsetWidth-mask.offsetWidth){
                x = small.offsetWidth-mask.offsetWidth;
            }

            if(y<0){
                y=0;
            }else if(y>small.offsetHeight-mask.offsetHeight){
                y= small.offsetHeight-mask.offsetHeight
            }
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';

            //大图与小图的比例

            /*var scalX = bigs.offsetWidth/small.offsetWidth;
            var scalY = bigs.offsetHeight/small.offsetHeight;*/

            var scalX = x/(small.offsetWidth-mask.offsetWidth);
            var scalY = y/(small.offsetHeight-mask.offsetHeight);

            bigs.style.left = -(x*scalX)+'px';
            bigs.style.top = -(y*scalY)+'px';

        };

    </script>

</html>