放大镜例子

下面是一个放大镜例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #small{
                width: 300px;
                height: 300px;
                position: relative;    
                float:left;    
                margin-right: 10px;        
            }
            #small img{
                width: 300px;
            }
            #small div{
                width: 100px;
                height: 100px;
                background: green;
                opacity: 0.6;
                position: absolute;
                left: 0;
                top: 0;
                cursor: move;
            }
            #big{
                width: 500px;
                height:500px;
                float:left;
                overflow: hidden;
                position: relative;
                
            }
            #big img{
                position: absolute;
                left: 0;
                top:0;
            }
        </style>
        <script>
            window.onload=function(){                
                var small=document.getElementById('small');
                var div=document.querySelector('#small div');
                var big=document.getElementById('big');
                var bigimg=document.querySelector('#big img');
                
                div.style.display='none';
                big.style.display='none';
                
                small.onmouseover=function(){
                    div.style.display='block';
                    big.style.display='block';
                }
                
                small.onmouseout=function(){
                    div.style.display='none';
                    big.style.display='none';
                }
                
                document.onmousemove=function(ev){
                    var l=ev.clientX-div.offsetWidth/2-small.offsetLeft;
                    var t=ev.clientY-div.offsetHeight/2-small.offsetTop;

                    if(l<0){
                        l=0;
                    }else if(l>small.offsetWidth-div.offsetWidth){
                        l=small.offsetWidth-div.offsetWidth;
                    }
                    if(t<0){
                        t=0;
                    }else if(t>small.offsetHeight-div.offsetHeight){
                        t=small.offsetHeight-div.offsetHeight;
                    }
                    div.style.left=l+'px';
                    div.style.top=t+'px';
                    
                    var scaleX=l/(small.offsetWidth-div.offsetWidth);
                    var scaleY=t/(small.offsetHeight-div.offsetHeight);
                    
                    bigimg.style.left=-scaleX*(bigimg.offsetWidth-big.offsetWidth)+'px';
                    bigimg.style.top=-scaleY*(bigimg.offsetHeight-big.offsetHeight)+'px';                                          
                }
            }

        </script>
        
    </head>
    <body>
        <div id="small">
            <img src="images/big.jpg"/>
            <div></div>
        </div>
        <div id="big">
            <img src="images/big.jpg"/>
        </div>
    </body>
</html>
View Code

 

posted @ 2018-08-28 10:05  只是那些  阅读(158)  评论(0)    收藏  举报