原生js模仿京东图片放大镜效果

最新推荐文章于 2024-04-27 07:59:09 发布

冰雪为融

最新推荐文章于 2024-04-27 07:59:09 发布

阅读量1.4k

点赞数

分类专栏： js练习文章标签： js

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79670076

版权

js练习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦

嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜练习</title>
    <style>
        #box{width:200px; height:200px; position:absolute; left:10px; top:10px;}
        #img1{width:200px; height:200px;}
        #oSpan{width:80px; height:80px; opacity:0.5; filter:alpha(opacity=50); position:absolute; background:yellow; display:none;}
        #mark{width:200px; height:200px; position:absolute; opacity:0; filter:alpha(opacity=0); left:0px; top:0px;}
        #big{width:400px; height:400px; overflow:hidden;  position:absolute; left:300px; top:10px; display:none;}
        #bimg{position:absolute; left:0px; top:0px;}
    </style>
</head>
<body>
<div id="box">
    <img id="img1" src="b2.jpg"/>
    <span id="oSpan"></span>
    <div id="mark"></div>
</div>
<div id="big"><img id="bimg" src="b1.jpg"/></div>
<script>
    var oDiv = document.getElementById('box');
    var oSpan = oDiv.getElementsByTagName('span')[0];
    var oBig = document.getElementById('big');
    var oBimg = document.getElementById('bimg');
    oDiv.onmouseover = function(ev){

        var ev = ev||event;
        var L = ev.clientX - oDiv.offsetLeft;
        var T = ev.clientY - oDiv.offsetTop;
        oSpan.style.display = 'block';
        oSpan.style.left = L - oSpan.offsetWidth+'px';//计算鼠标移入时，放大镜的位置
        oSpan.style.top = T - oSpan.offsetHeight+'px';
        oBig.style.display = 'block';
        document.onmousemove = function(ev){
            var ev = ev||event;
            var oW = oDiv.offsetWidth - oSpan.offsetWidth;
            var oH = oDiv.offsetHeight - oSpan.offsetHeight;
            var b = oBimg.offsetWidth/oDiv.offsetWidth;
            L = ev.clientX -oSpan.offsetWidth/2;
            T = ev.clientY - oSpan.offsetHeight/2;
            if(L<0){//下面的是限制放大镜的移动范围
                L=0;
            }
            if(L>oW){
                L = oW + 'px';
            }
            if(T<0){
                T=0;
            }
            if(T>oH){
                T = oH + 'px';
            }
            oSpan.style.left = L +'px';
            oSpan.style.top = T +'px';
            oBimg.style.left = - L*b +'px';
            oBimg.style.top = -T*b +'px';

        }

    }
    oDiv.onmouseout = function(){
        oSpan.style.display = 'none';
        oBig.style.display = 'none';
        document.onmousemove = null;

    }





</script>
</body>
</html>

冰雪为融

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js模仿京东图片放大镜效果

实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;放大镜练习&lt;/title&gt;
复制链接

扫一扫