原生 js 放大镜的写法

最新推荐文章于 2023-09-14 19:35:46 发布

无奈html5

最新推荐文章于 2023-09-14 19:35:46 发布

阅读量219

点赞数

文章标签： javascript css html html5

本文链接：https://blog.csdn.net/html5_javascript/article/details/107825291

版权

放大镜

<style>
        #big{
           position: relative;
            width: 400px;
            height: 227px;
            left: 100px;
            top: 100px;
        }
        #big img{
            width: 100%;
            height: 100%;
        }
        #big #mark{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: #fff;
            opacity: 0.5;
            filter:alpha(opacity=50);
            display: none;
        }
        #box{
            position: absolute;
            left: 600px;
            top: 100px;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;
            display: none;
        }
        #box img{
          position: absolute;
          width: 1200px;
          height: 681px;
        }
    </style>
</head>
<body>
    <div id="big">
        <img src="../img/2.jpg" alt="">
        <div id="mark"></div>
    </div>
    <div id="box">
        <img src="../img/2.jpg" alt="">
    </div>
</body>
<script>
    var oBig=document.getElementById("big");
    var oMark=document.getElementById("mark"); 
    var oBox=document.getElementById("box");
    var oImg=oBox.children[0];//获取所需要的DOM节点
    oBig.onmouseover=function(){//鼠标移入遮罩层和右边的放大效果显示
        oMark.style.display="block";
        oBox.style.display="block";
    }
    oBig.onmouseout=function(){//移出消失

        oMark.style.display="none";
        oBox.style.display="none";
    }
  document.onmousemove=function(e){//遮罩层跟随鼠标移动
        var evt=e||event;
        var l=evt.pageX-150;
        var t=evt.pageY-150;
        if(l<=0){//遮罩层移动范围控制
            l=0;
        }
        if(l>=oBig.offsetWidth-oMark.offsetWidth){
            l=oBig.offsetWidth-oMark.offsetWidth;
        }
        if(t<=0){
            t=0;
        }
        if(t>=oBig.offsetHeight-oMark.offsetHeight){
            t=oBig.offsetHeight-oMark.offsetHeight;
        }
        oMark.style.left=l+"px";//遮罩层移动
        oMark.style.top=t+"px";
        oImg.style.left=-l*3+"px";//右边放大图反方向移动
        oImg.style.top=-t*3+"px";
    }
   
   

</script>

无奈html5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 js 放大镜的写法

放大镜<style> #big{ position: relative; width: 400px; height: 227px; left: 100px; top: 100px; } #big img{ width: 100%; height: 100%; }
复制链接

扫一扫