用js写放大镜

最新推荐文章于 2025-05-15 09:16:30 发布

前端你别闹~

最新推荐文章于 2025-05-15 09:16:30 发布

阅读量433

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ASLlife/article/details/89510452

本文介绍如何使用JavaScript在网页上创建一个图片放大镜功能。通过监听鼠标移动事件，实时调整放大镜的位置和显示区域，实现对图片细节的放大预览。详细步骤包括设置HTML结构、CSS样式和JavaScript逻辑，帮助开发者打造更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        img {
            width: 250px;
            height: 150px;
        }
        #pic_wrap {
            position: relative;
            width: 250px;
            height: 150px;
        }
        #float_box {
            width: 100px;
            height: 100px;
            background-color: green;
            filter: opacity(alpha: 30);
            opacity: 0.3;
            position: absolute;
            display: none;
        }
        #big_img {
            background-image: url(01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.png);
            height: 450px;
            width: 750px;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        #show {        
            width: 300px;
            height: 300px;
            background-color: white;
            opacity: 1;
            filter: opacity(alpha:1);
            overflow: hidden;
            display: none;
        }
    </style>
</head>
<body>
    <div id="pic_wrap">
        <div id="float_box"></div>
        <img src="image/01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.png">
    </div>
    <div id="show">
        <img src="image/01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.png" id="big_img">
    </div>
<script src="等比放大镜.js"></script>
<script type="text/javascript">    
    var pic_wrap = document.getElementById('pic_wrap'),
        float_box = document.getElementById("float_box"),
        show = document.getElementById('show');
        big_img = document.getElementById("big_img");
    //鼠标移入事件，让放大镜和放大区显示！
    pic_wrap.onmouseover = function() {
        float_box.style.display = "block";
        show.style.display = "block";
    }
    //鼠标不断移动时触发，实时更新放大镜得到的图片
    pic_wrap.onmousemove = function(event) {
        floatMove(float_box, pic_wrap, event);
        showPic();
    }
    //鼠标移出后，放大镜和放大区隐藏
    pic_wrap.onmouseout = function() {
        float_box.style.display = "none";
        show.style.display = "none";
    }    
            //由于offset方法包括边框，在使用的时候很容易出现问题，所以用style来实时获取attr！
    function getStyle(obj, attr) {
        if (window.currentStyle) {
            return parseInt(obj.currentStyle[attr]);
        }
        else {
            return parseInt(getComputedStyle(obj,null)[attr]);
        }
    }
    //运动框架，控制放大镜在原图中的位置！
    function floatMove(argu1, argu2, event) {
        var e = event ||window.event;
        var minLeft = getStyle(argu1, "width");
        var maxLeft = getStyle(argu2, "width") - minLeft/2;
        var minHeight = getStyle(argu1, "height");
        var maxHeight = getStyle(argu2, "height") - minHeight/2;
        console.log(maxLeft);
        console.log(maxLeft - minLeft/2);
        if (e.clientX < minLeft/2) {
            float_box.style.left = "0px";//防止放大镜超出左边框
        }
        else if (e.clientX > maxLeft) {
            float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
        }
        else {
            float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
        }
        if (e.clientY < minHeight/2) {
            float_box.style.top = "0px"; //防止放大镜超出上边框
        }
        else if (e.clientY > maxHeight) {
            float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
        }
        else {
            float_box.style.top = event.clientY - minLeft/2 + "px";
        }
    }
    //用来显示放大镜得到的图片，利用坐标计算！实时更新可视区域
    function showPic() {
        var iCurLeft = getStyle(float_box,"left");
        var iCurTop = getStyle(float_box,"top");
        var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
        var b = getStyle(big_img,"width") - getStyle(show,"width");        
        var moveWidth = -(iCurLeft/a)*b;
        big_img.style.left = moveWidth + "px";
        var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
        var d = getStyle(big_img,"height") - getStyle(show,"height");
        var moveHigth = -(iCurTop/c)*d;
        big_img.style.top = moveHigth + "px";
    }
</script>
</body>
</html>