html静态网页：放大镜

功能分三个模块： 1-鼠标跟随 2-处理越界 3-方大 效果：

文件架构： 学习交流群：970353786 第一部分代码：

	
		
		
        
            #box{
               width: 400px;
               height: 400px;
               border: 1px solid black;
               margin: 100px auto;
               position: relative;
            }
            #glass{
                width: 50px;
                height: 50px;
                background-color: green;
                left: 100px;
                top: 50px;
                position: absolute;
            }
        
	
	
        
            
                
            
        
	
    
        var box = document.querySelector('#box');
        var glass = document.querySelector('#glass');
        // box.onclick = function(e){
        box.onmousemove = function(e){
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            
            x -= parseInt(getComputedStyle(glass).width)/2
            y -= parseInt(getComputedStyle(glass).height)/2
            
            glass.style.left = x + "px";
            glass.style.top = y + "px";
            
            
        }
    

第二部分代码：

	
		
		
        
            #box{
               width: 400px;
               height: 400px;
               border: 1px solid black;
               margin: 100px auto;
               position: relative;
            }
            #glass{
                width: 50px;
                height: 50px;
                background-color: green;
                left: 100px;
                top: 50px;
                position: absolute;
                display: none;
            }
        
	
	
        
            
                
            
        
	
    
        var box = document.querySelector('#box');
        var glass = document.querySelector('#glass');
        // box.onclick = function(e){
        box.onmousemove = function(e){
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            
            x -= parseInt(getComputedStyle(glass).width)/2
            y -= parseInt(getComputedStyle(glass).height)/2
            //越界处理
            //左越界处理
            if (x  maxHeight ) {
                y = maxHeight;
            }
            console.log(x,y);
            glass.style.left = x + "px";
            glass.style.top = y + "px"; 
        }
        box.onmouseover = function(){
            glass.style.display = "block"
        }
        box.onmouseout = function(){
            glass.style.display = "none"
        }
    

第三部分代码：

	
		
		
        
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 800px;
                margin: 50px auto;
            }
            .left{
                width: 250px;
                height: 250px;
                border: 1px solid black;
                float: left;
                margin-right:30px ;
                position: relative;
            }
            .left img{
                width: 100%;
            }
            .right{
                
                width: 500px;
                height: 500px;
                border: 1px solid black;
                overflow: hidden;
                float: left;
                display: none;
                position: relative;
            }
            .right img{
                position: absolute;
            }
            .glass{
                /* 如何计算放大镜宽高？？ */
                /* 
                 已知：小div宽高 = 小图宽高 = 250*250
                      大div宽高 = 500*500
                      大图宽高 = 800*800
                 计算公式：
                    放大镜宽 / 小div宽 = 大div宽 / 大图宽
                    ==>放大镜宽 = 大div宽 / 大图宽 * 小div宽
                                = 500/800*250
                                =1250/8 = 156.125
                 */
                width:157px;
                height:157px;
                background-color: blue;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0.3;
                display: none;
            }
        
	
	
        
            
                
                
            
            
                
            
        
	
    
        var leftDiv = document.querySelector('.left');
        var glass = document.querySelector('.glass');
        var rightDiv = document.querySelector('.right');
        var bigImg = document.querySelector('.right img');
        
        leftDiv.onmousemove = function(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            
            x -= parseInt(getComputedStyle(glass).width)/2
            y -= parseInt(getComputedStyle(glass).height)/2
            //越界处理
            //左越界处理
            if (x  maxHeight ) {
                y = maxHeight;
            }
            console.log(x,y);
            glass.style.left = x + "px";
            glass.style.top = y + "px"; 
            
            //大图移动，需要计算移动的距离
            /* 如何计算大图移动的距离？？ */
            /* 
             已知：小div宽高 = 小图宽高 = 250*250
                  大div宽高 = 500*500
                  大图宽高 = 800*800
                  放大镜宽高= 157*157
                  放大镜移动的x和y
             计算大图移动的距离left和top????
                计算公式：
                放大镜移动x / 大图移动的x = 小图宽 / 大图宽
                ===>大图移动的x = 大图宽 / 小图宽 * 放大镜移动x
                
              */
            var left = -x * 800/250;
            var top =  -y * 800/250; 
            bigImg.style.left = left + "px";
            bigImg.style.top = top + "px";
            
        }
        leftDiv.onmouseover = function(){
            glass.style.display = "block";
            rightDiv.style.display = "block";
        }
        leftDiv.onmouseout = function(){
            glass.style.display = "none";
            rightDiv.style.display = "none";
        }