js放大镜效果

最新推荐文章于 2023-08-23 15:31:17 发布

堇年V★Z

最新推荐文章于 2023-08-23 15:31:17 发布

阅读量96

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_45478024/article/details/100606583

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript创建一个简单的放大镜效果，让用户体验到在网页上查看细节时的放大镜功能。

摘要由CSDN通过智能技术生成

放大镜

在这里插入图片描述

<style>
    *{padding: 0;margin: 0;}
    #box{
        margin: 50px auto;
        width: 800px;
        height: 400px;
        overflow: hidden;
        border: 5px solid rgb(228, 151, 36);
        position: relative;
    }
    #small{
        width: 500px;height: 400px;
        position: absolute;
    }
    #small img{
        width: 100%;height: 100%;
        display: block;
        position: absolute;
        left:0px;top:0px;
    }
    #small span.move{
        width: 100px;height: 100px;
        position: absolute;
        top:0;left:0;
        background-color: black;opacity: 0.3;
        display: none;
    }
    #big{
        width: 200px;height: 200px;
        float: left;
        position: absolute;
        border: 2px solid rgb(199, 3, 3);
        overflow: hidden;
         display: none; 
    }
    #big_img{
        position: absolute;
        left:0px;top:0px;
        width:1000px;
        height: 800px;
    }
    </style>

<body>
    <div id="box">
        <div id="small">
            <img src="./images/3.jpg" />
            <span class="move"></span>
        </div>
        <div id="big">
            <img src="./images/3.jpg" id="big_img" />
        </div>
    </div>  
</body>

<script>
    /* 
        鼠标移入 small 的 img 中，<span>滑块显示，且跟随鼠标的移动而移动
            big 中 只显示鼠标滑过的地方的局部图片  成放大效果
    */
    // 1. 获取 small 节点 给 small 添加鼠标移动事件    // getElementById
    var oSmall = document.getElementById("small");    //console.log(oSmall);
    // 5. 获取 move 节点   // querySelector
    var oMove = document.querySelector(".move");    //console.log(oMove);
    // 获取 box 节点
    var oBox = document.getElementById("box");
    var oBig = document.getElementById("big");
    var oBigImg = document.getElementById('big_img');
    // 2. 给 small 绑定鼠标移动事件
    oSmall.onmousemove = function(event){
        // 添加 event 事件 获取鼠标滑动时的位置
        // 对 event 事件 做兼容
        var e = event || window.event;
        // 4. 获取鼠标滑动时距离浏览器左边的 left 和距离顶部的 top 值   // .clientX    // .clientY
        var mouseX = e.clientX;   //console.log(mouseX); 
        var mouseY = e.clientY;   //console.log(mouseY);
        // 5. 鼠标在 small 的 img 中滑动 - 滑块<span>显示
        oMove.style.display = "block";
        // 6. 获取 滑块距离 small 左边left 和顶部 top的值 
        var moveLeft = mouseX-oBox.offsetLeft - oMove.offsetWidth/2;    
        var moveTop = mouseY -oBox.offsetTop - oMove.offsetHeight/2;
        // 限定 滑块的滑动范围
        //如果 moveLeft 小于零 则等于零 反之为 moveLeft
        moveLeft < 0 ? moveLeft = 0 : moveLeft = moveLeft;
        moveLeft > this.offsetWidth - oMove.offsetWidth ? moveLeft = this.offsetWidth - oMove.offsetWidth : moveLeft = moveLeft;
        //console.log(this.offsetWidth);
        moveTop < 0 ? moveTop = 0 : moveTop = moveTop;
        moveTop > this.offsetHeight - oMove.offsetHeight ? moveTop = this.offsetHeight - oMove.offsetHeight : moveTop = moveTop;
        //console.log(this.offsetHeight);
        // 赋值给 滑块的 left 和 top
        oMove.style.left=moveLeft+'px';
        oMove.style.top=moveTop+'px';
        //鼠标滑动 big 显示
        oBig.style.top = this.offsetTop + 'px';
        oBig.style.left = this.offsetLeft + this.offsetWidth + 'px';
        oBig.style.display = 'block';       
        var oBig_x = moveLeft/(this.offsetWidth-oMove.offsetWidth)*(oBig.offsetWidth-oBigImg.offsetWidth);
        var oBig_y = moveTop/(this.offsetHeight-oMove.offsetHeight)*(oBig.offsetHeight-oBigImg.offsetHeight);      
        oBigImg.style.top = oBig_y + 'px';
        oBigImg.style.left = oBig_x + 'px';
    }
    oSmall.onmouseout = function(){
        oMove.style.display = 'none';
        oBig.style.display = 'none';
    }
</script>

堇年V★Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js放大镜效果

放大镜<style> *{padding: 0;margin: 0;} #box{ margin: 50px auto; width: 800px; height: 400px; overflow: hidden; border: 5px solid rgb(228, 151, 36);...
复制链接

扫一扫