原生js放大镜

最新推荐文章于 2022-02-20 17:28:29 发布

原创最新推荐文章于 2022-02-20 17:28:29 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原生js #特效

本文介绍如何使用原生JavaScript实现图片放大镜功能，包括鼠标移入显示放大镜和大图，鼠标移出则隐藏，以及鼠标移动时同步调整放大区域和大图位置的详细步骤。

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

原生js放大镜
步骤写在注释里，新手。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
    body{
        position: relative;
    }  
    *{
        margin: 0;padding:0;
    }  
    #Box{  
        height:300px;   
        width:300px;  
        position: relative;  
        border:1px solid gray;  
    }  
    #bigBox{  
        height:300px;   
        width:300px;  
        position: absolute;  
        top:0;  
        left:310px;  
        overflow: hidden;  
        display:none;  
        border: 1px solid gray;  
    }  
    #Box img{  
        height:100%;   
        width:100%;  
    }  
    #lay{  
        background:#fff;  
        border:1px solid gray;  
        position: absolute;  
        top:0;  
        left: 0;  
        opacity:0.5;  
        display:none;  
        filter:alpha(opacity=50);
    }  

    </style>
</head>
<body>
    <div id="Box">  
    	<!-- 图片 -->
        <img  src="jietu.png" height="345" width="340"/>  
        <span id="lay"></span>  
    </div>  
    <div id="bigBox">  
    	<!-- 图片 同上相同-->
        <img  src="jietu.png" height="345" width="340" />  
    </div>
    <script>
    function fdj(scale){
            //获取元素
            var Box = document.getElementById("Box");  
            var bigBox = document.getElementById("bigBox");  
            var bigbox = getChildNodes(bigBox)[0];  
            var lay = document.getElementById("lay");  
                //鼠标移入时，将放大镜和bigBox显示出来  
                Box.onmouseover = function(){  
                    lay.style.display = "block";  
                    bigBox.style.display = "block";  
                }  
                //鼠标移出时，将放大镜和bigBox隐藏起来  
                Box.onmouseout = function(){  
                    lay.style.display = "none";  
                    bigBox.style.display = "none";  
                }  
                Box.onmousemove = function(e){  
                    e = e || event;//事件源的兼容问题  
                    this.scale = 4;//图片的放缩比例  
                    //将鼠标放到放大镜的中间  
                    var x = e.clientX - lay.offsetWidth/2;  
                    var y = e.clientY - lay.offsetHeight/2;  
                    //将放大镜的宽高与盒子的宽高结合起来按比例放缩  
                    lay.style.width = parseInt(Box.offsetWidth / scale )+ "px";  
                    lay.style.height = parseInt(Box.offsetHeight / scale)+ "px";  
                    //设置大盒子的宽高  
                    bigbox.style.width = Box.offsetWidth * scale + "px";  
                    bigbox.style.height = Box.offsetHeight * scale + "px";  
                    if(x < 0){  
                        x = 0;//左边界的判断，当超出时将x置为0;  
                    }  
                    //右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;  
                    if( x >= Box.offsetWidth - lay.offsetWidth){  
                        x = Box.offsetWidth - lay.offsetWidth;  
                    }  
                    //下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;  
                    if( y >= Box.offsetHeight - lay.offsetHeight){  
                        y = Box.offsetHeight - lay.offsetHeight;  
                    }  
                    if(y < 0){  
                        y = 0;//上边界的判断，当超出时将y置为0;  
                    }  
                    lay.style.left = x + "px";  
                    lay.style.top = y + "px";  
                    //同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的  
                    var left = lay.offsetLeft * scale;  
                    var top  = lay.offsetTop * scale ;  
                    bigbox.style.marginLeft =(left * (-1)) + "px";  
                    bigbox.style.marginTop =(top * (-1))+ "px";  


                }  

            }  
            //获取子节点  
            function getChildNodes(element){  
                var arr = [];  
                var eList = element.childNodes;  
                for(var i = 0;i < eList.length;i++){  
                    if(eList[i].nodeType == 1){//过滤空白节点  
                        arr.push(eList[i]);   
                    }  
                }   
                return arr;  
            }
            fdj(2);
    </script>
</body>
</html>