使用js实现放大镜效果

最新推荐文章于 2023-03-19 16:40:41 发布

qq_41903059

最新推荐文章于 2023-03-19 16:40:41 发布

阅读量177

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_41903059/article/details/112016349

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript和HTML/CSS创建一个简单的图片放大镜效果。通过监听鼠标移动事件，动态调整放大镜的位置和大图的显示位置，实现图片细节的平滑放大。这个效果常用于电商网站的产品展示。

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

使用js做出放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #small{
            width: 300px;
            height: 225px;
            float: left;
            position: relative;
        }
        #mark{
            width: 100px;
            height: 100px;
            opacity: 0.3;
            background-color: black;
            position: absolute;
            left: 0;
            top: 0;
        }
        #big{
            overflow: hidden;
            width: 300px;
            height: 300px;
            float: left;
            margin-left: 30px;
            position: relative;

        }
        #tu{
            position: absolute;
            top: 0;
            left: 0;

        }
    </style>
</head>
<body>
    <div id="box">
        <div id="small">
            <div><img src="images/smallpic.jpg" alt=""></div>
            <span id="mark"></span>
        </div>
        <div id="big">
            <img src="images/bigpic.jpg" alt="" id="tu">
        </div>
    </div>
    <script>
        var small = document.getElementById("small");
        var mark = document.getElementById("mark");
        var tu = document.getElementById("tu");
        small.onmouseover = function(e){
            var event = e||event;
            //鼠标距离浏览器的距离 event.clientX
            //小图片距离浏览器的距离 small.offsetLeft
            var left = event.clientX -small.offsetLeft-(mark.offsetWidth/2);
            var top = event.clientY -small.offsetTop-(mark.offsetHeight/2);
            var maxW = small.offsetWidth-mark.offsetWidth;
            var maxH = small.offsetHeight-mark.offsetHeight;
            if(left<0){left = 0};
            if(top<0){top =0}
            if(left>maxW){
                left = maxW;
            }
            if(top>maxH){
                top= maxH;
            }
            // console.log(left);
            mark.style.left = left+"px";
            mark.style.top = top+"px";
            tu.style.left = -left*(tu.offsetWidth/small.offsetWidth)+"px";
            tu.style.top = -top*(tu.offsetHeight/small.offsetHeight)+"px";
        }
    </script>
    
</body>
</html>