商品放大镜

小鱼儿 2022-05-18 02:38 273阅读 0赞

<!doctype html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>无标题文档</title>
    
    <style>
    
    #box{
    
    height:200px;
    
    width:200px;
    
    border:1px solid #000;
    
    position:relative;
    
    overflow:hidden;
    
    cursor:move;
    
    }
    
    #box img{
    
    height:100%;
    
    width:100%;
    
    }
    
    #box span{
    
    height:100px;
    
    width:100px;
    
    display:block;
    
    background:rgba(0,0,0,0.5);
    
    left:0;
    
    top:0;
    
    position:absolute;
    
    display:none;
    
    }
    
    /*
    
    #box div{
    
    width:100%;
    
    height:100%;
    
    position:absolute;
    
    left:0;
    
    top:0;
    
    background:rgba(255,0,0,0);
    
    }*/
    
    #pop{
    
    height:500px;
    
    width:500px;
    
    overflow:hidden;
    
    border:1px solid #000;
    
    position:relative
    
    }
    
    #pop img{
    
    position:absolute;
    
    left:0;
    
    top:0;
    
    height:800px;
    
    width:800px;
    
    }
    
    </style>
    
    <script>
    
    /*
    
    onmouseover,onmouseout 有子集影响父级的bug
    
    解决方案
    
    1.js onmouseenter onmouseleave
    
    2.css 多一个遮罩层
    
    */
    
    window.onload = function(){
    
    var oBox = document.getElementById('box');
    
    var oMark = oBox.getElementsByTagName('span')[0];
    
    var oPop = document.getElementById('pop');
    
    var oBigImg = oPop.getElementsByTagName('img')[0];
    
    oBox.onmousedown = function(){
    
    return false;//取消默认事件
    
    }
    
    oBox.onmouseenter = function(){//onmouseenter和onmouseover 前者是没有事件冒泡的
    
    oMark.style.display ='block';
    
    }
    
    oBox.onmouseleave = function(){//onmouseleave和onmouseout 前者是没有事件冒泡的
    
    oMark.style.display ='none';
    
    }
    
    oBox.onmousemove = function(ev){
    
    var ev = ev || event;//为了ff
    
    var L = ev.clientX-oBox.offsetLeft - oMark.offsetWidth/2 + document.documentElement.scrollLeft;
    
    var T = ev.clientY-oBox.offsetTop - oMark.offsetHeight/2 + document.documentElement.scrollTop;
    
    
    
    if(L<0){
    
    L=0;
    
    }else if(L>oBox.clientWidth - oMark.offsetWidth){
    
    L = oBox.clientWidth - oMark.offsetWidth
    
    }
    
    if(T<0){
    
    T=0;
    
    }else if(T>oBox.clientHeight - oMark.offsetHeight){
    
    T = oBox.clientHeight - oMark.offsetHeight
    
    }
    
    var x = L / (oBox.clientWidth-oMark.offsetWidth) * (oBigImg.offsetWidth-oPop.clientWidth);
    
    var y = T / (oBox.clientHeight-oMark.offsetHeight) * (oBigImg.offsetHeight-oPop.clientHeight);
    
    oMark.style.left = L + 'px';
    
    oMark.style.top = T + 'px';
    
    oBigImg.style.left = -x + 'px';
    
    oBigImg.style.top = -y + 'px';
    
    }
    
    }
    
    </script>
    
    </head>
    
    
    
    <body>
    
    <div id="box">
    
    <img src="1.jpg"/>
    
    <span></span>
    
    </div>
    
    <div id="pop">
    
    <img src="1.jpg"/>
    
    </div>
    
    </body>
    
    </html>