放大镜

来源：互联网发布：图像边缘检测的算法编辑：程序博客网时间：2024/05/05 07:11
<!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.onmouseenter=function (e) {            utils.css(mark,{display:"block"});            utils.css(box2,"display","block");            bigImg(e);        };        box1.onmousemove=function (e) {            utils.css(mark,{display:"block"});            utils.css(box2,"display","block");            bigImg(e);        };        box1.onmouseleave=function (e) {            utils.css(mark,{display:"none"});            utils.css(box2,"display","none");        };    </script></body></html>
1 0