放大镜

最新推荐文章于 2021-11-25 23:50:23 发布

being_0008

最新推荐文章于 2021-11-25 23:50:23 发布

阅读量514

点赞数 1

分类专栏： JavaScript 文章标签： JS H5

本文链接：https://blog.csdn.net/Ymm_0008/article/details/52598586

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <!--首先要把HTML结构和样式写好,这里大家肯定都明白,不作具体解释-->
    <!--所谓的放大镜其实也是一个假象,即它是2张图片而已,

    基本思路:
    小图片我们给他写好样式,大图片我们让他在小图片的右侧隐藏,一旦镜子(鼠标)进入小图片,大图片出现
    并且能够在相应位置放大,例子中我们的大图片尺寸就是小图片尺寸的3倍,实际工作也是如此-->
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        html,body,div,img {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            -webkit-user-select: none;
        }
        img {
            border: none;
            display: block;
        }
        #box1,#box2 {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 50px;
            box-shadow: 4px 4px 10px 3px darkblue;
        }
        #mark {
            display: none;
            position: absolute;
            width: 100px;
            height: 100px;
            top:0;
            left: 0;
            background-color: silver;
            opacity: 0.7;
            filter: alpha(opacity=70);
            cursor: move;
            border-radius:50% ;
        }
        #box1 {
            left: 60px;
        }
        #box2 {
            display: none;
            left: 380px;
            overflow: hidden;
            border-radius: 50%;
        }
        #box1 img {
            width: 100%;
            height: 100%;
        }
        #box2 img {
            width: 300%;
            height: 300%;
        }


    </style>
</head>
<body>
    <div id="box1">
        <!--这是小图-->
        <img src="img/iphone.jpg" alt="">
        <!--这个mark就是鼠标位置,也就是进入图片的时候那个镜子-->
        <div id="mark"></div>
    </div>

    <div id="box2">
        <!--这个是大图-->
        <img src="img/iphone_big.jpg" alt="">
    </div>


    <script src="js/utils.js"></script>
    <script>
        //首先我们要获取元素
        var box1=document.getElementById("box1");
        var mark=document.getElementById("mark");
        var box2=document.getElementById("box2");
        var oImg=box2.getElementsByTagName("img")[0];

        //封装一个函数,实现放大镜效果
        function bigImg(e) {
            //首先我们要去判断事件源,也就是e
            e=e||window.event;
            //我们要获取这个小图片所在的元素距离body的距离,也就是一个left 和top值
            //---------->其中utils是我自己封装的函数
            //因为我们要实现鼠标进入这个小图片的时候再出现镜子,不进入就不会出现,
            // 所以就要进行判断,也就是要求出它距离body的最大值最小值.
            //下面的 l  t 就是它的最小值
            var box1Offent=utils.offset(box1);

            //client 是距离浏览器边框(可视区域)的距离
            //这里的offsetWidth就是这个mark(镜子)的宽度,同理offsetHeight就是高度.
            //这里为什么除以2那?是因为我们不除以2的话,事件源也就是鼠标就在这个镜子的左上角,并不美观
            //我们要让他在镜子的中心,所以宽高各减去一半,这样我们的鼠标就会在mark的中间了
            var l=e.clientX-box1Offent.left-mark.offsetWidth/2;
            var t=e.clientY-box1Offent.top-mark.offsetHeight/2;
            utils.css(mark,{left:l,top:t});
            //边界判断
            //最小的我们知道了,那么最大的就是用镜子父元素的宽高减去镜子的宽高.
            //大家仔细想想是不是这么个道理??
            var minL=0,minT=0;
            var maxL=box1.offsetWidth-mark.offsetWidth;
            var maxT=box1.offsetHeight-mark.offsetHeight;

            //然后我们对镜子的边界进行判断,同时得到l  t 以后将他赋给大图片;
            //注意大图片的值 这时候要是他的3倍(因为我们前面说了,大图是小图的3倍)
            l=l<=minL?l=minL:(l>=maxL?maxL:l);
            t=t<=minT?t=minT:(t>=maxT?maxT:t);
            utils.css(mark,{left:l,top:t});
            utils.css(oImg,{marginLeft:l*-3,marginTop:t*-3});
        }

        //给镜子的父元素绑定事件,同时这里也可以利用JQ去写会更方便
        box1.οnmοuseenter=function (e) {
            utils.css(mark,{display:"block"});
            utils.css(box2,"display","block");
            bigImg(e);
        };
        box1.οnmοusemοve=function (e) {
            utils.css(mark,{display:"block"});
            utils.css(box2,"display","block");
            bigImg(e);
        };
        box1.οnmοuseleave=function (e) {
            utils.css(mark,{display:"none"});
            utils.css(box2,"display","none");
        };



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