JS实现放大镜效果

最新推荐文章于 2024-04-26 16:47:03 发布

最后一首练习曲

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量244

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/linglingpractice/article/details/128641339

版权

需求

鼠标移至图片上方时，鼠标周围出现黄色正方形框，并会随鼠标的移动而移动
黄色方框将内容的长和宽军放大2.4倍，并在图片右边进行显示

效果展示

实现原理

利用onmouseover、onmousemove、onmouseout三个事件，第一个是让鼠标移上去后显示放大镜和右边的大样式图片。计算放大镜在块中的位置，并且计算在鼠标移动的位移时大样式图片的偏移位置。
利用鼠标的移入移出事件改变黄色框与右边放大块的display实现黄色框的出现与消失

代码

js部分

    <script>
        var contain=document.getElementById("contain");
        var small=document.getElementById("small");
        var big=document.getElementById("big");
        var mirror=document.getElementById("mirror");
        var bigimg=document.getElementById("bigimg");
        small.onmouseover=function(){
            mirror.style.display="block";
            big.style.opacity=1;
        }
        small.onmousemove=function(event){
            var x=event.clientX-contain.offsetLeft-mirror.offsetWidth/2;
            var y=event.clientY-contain.offsetTop-mirror.offsetHeight/2;
            if(x<0){
                x=0;
            }else if(x>(small.offsetWidth-mirror.offsetWidth)){
                x=small.offsetWidth-mirror.offsetWidth;
            }
            if(y<0){
                y=0;
            }else if(y>(small.offsetHeight-mirror.offsetHeight)){
                y=small.offsetHeight-mirror.offsetHeight
            }
            mirror.style.left=(x)+"px";
            mirror.style.top=(y)+"px";
            bigimg.style.left=-x*(2.4)+"px";
            bigimg.style.top=-y*(2.4)+"px";

        }
        small.onmouseout=function(){
            mirror.style.display="none";
            big.style.opacity=0;
        }
    </script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #contain{
        margin-top: 50px;
        width: 1010px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #samll{
        position: relative;
        width: 209px;
        height:209px;
    }
    #small img{
        width: 500px;
        height: 400px;
    }
    #big{
        opacity: 0;
        margin-left: 10px;
        width: 500px;
        height: 500px;
        overflow: hidden;
        position: relative;
    }
    #big img{
        width: calc(500px*2.4);
        height: calc(400px*2.4);
        position: absolute;
    }
    #mirror{
        display: none;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(255, 255, 0,0.3);
    }
</style>
<body>
    <div id="contain">
        <div id="small">
            <img src="./img/0157025d78ff3ea801211d5351f5ce.jpg@1280w_1l_2o_100sh.jpg" alt="">
            <span id="mirror"></span>
        </div>
        <div id="big">
            <img src="./img/0157025d78ff3ea801211d5351f5ce.jpg@1280w_1l_2o_100sh.jpg" alt="" id="bigimg">
        </div>
    </div>
    <script>
        var contain=document.getElementById("contain");
        var small=document.getElementById("small");
        var big=document.getElementById("big");
        var mirror=document.getElementById("mirror");
        var bigimg=document.getElementById("bigimg");
        small.onmouseover=function(){
            mirror.style.display="block";
            big.style.opacity=1;
        }
        small.onmousemove=function(event){
            var x=event.clientX-contain.offsetLeft-mirror.offsetWidth/2;
            var y=event.clientY-contain.offsetTop-mirror.offsetHeight/2;
            if(x<0){
                x=0;
            }else if(x>(small.offsetWidth-mirror.offsetWidth)){
                x=small.offsetWidth-mirror.offsetWidth;
            }
            if(y<0){
                y=0;
            }else if(y>(small.offsetHeight-mirror.offsetHeight)){
                y=small.offsetHeight-mirror.offsetHeight
            }
            mirror.style.left=(x)+"px";
            mirror.style.top=(y)+"px";
            bigimg.style.left=-x*(2.4)+"px";
            bigimg.style.top=-y*(2.4)+"px";

        }
        small.onmouseout=function(){
            mirror.style.display="none";
            big.style.opacity=0;
        }
    </script>
</body>
</html>