放大镜效果 pageX的兼容性

发布时间：2020-06-29 03:34:46 作者：WarmDoll
来源：网络阅读：591

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        body{height:2000px;}
        div{width: 350px;height: 350px;border: 1px solid red;margin: 10px;float: left;overflow: hidden;}
        #s{position: relative;}
        #m{width: 100px;height: 100px;background: yellow;opacity: 0.4;filter: alpha(opacity:40);position: absolute;left: 0;top: 0;display: none;}
        #b{display: none;position: relative;}
        #b img{position: absolute;}
    </style>
    <script>
        window. function () {
            var oS=document.getElementById('s');
            var oM=document.getElementById('m');
            var oB=document.getElementById('b');
            var oImg = oB.children[0];
            oS. function () {
                oM.style.display='block';
                oB.style.display='block';
            };
            oS. function () {
                oM.style.display='none';
                oB.style.display='none';
            };
            oS. function (ev) {
                /*var oEv=ev||event;
                var l=oEv.pageX-oS.offsetLeft-oM.offsetWidth/2;
                var t=oEv.pageY-oS.offsetTop-oM.offsetHeight/2;*/
               /*兼容性问题 IE中：event对象有x,y属性没有pageX,pageY Firefox中：event对象有PageX,PageY;
                * 处理方法：var x=(event.x?event.x:event.pageX);*/
                var oE=ev||event;
                var oEvx=(oE.x?oE.x:oE.pageX);
                var oEvy=(oE.y?oE.y:oE.pageY);
                var l=oEvx-oS.offsetLeft-oM.offsetWidth/2;
                var t=oEvy-oS.offsetTop-oM.offsetHeight/2;
                if(l<0){
                    l=0;
                }
                if(l>oS.offsetWidth-oM.offsetWidth){
                    l=oS.offsetWidth-oM.offsetWidth;
                }
                if(t<0){
                    t=0;
                }
                if(t>oS.offsetHeight-oM.offsetHeight){
                    t=oS.offsetHeight-oM.offsetHeight;
                }
                oM.style.left=l+'px';
                oM.style.top=t+'px';
                oImg.style.left=-l/(oS.offsetWidth-oM.offsetWidth)*(oImg.offsetWidth-oB.offsetWidth)+'px';
                oImg.style.top=-t/(oS.offsetHeight-oM.offsetHeight)*(oImg.offsetHeight-oB.offsetHeight)+'px';
            }
        };
    </script>
</head>
<body>
<div id="s">
    <img src="img/img_small.jpg">
    <span id="m"></span>
</div>
<div id="b" class="b">
    <img src="img/img_big.jpg">
</div>
</body>
</html>

放大镜效果 pageX的兼容性

相关阅读