您的位置: 首页  >  文章  >  原生javascript实现图片放大镜

原生javascript实现图片放大镜

分类: 文章 • 2022-10-08 23:29:25

效果如图

原生javascript实现图片放大镜

所用知识点

  • offsetTop属性:
    此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
    返回值是一个整数，单位是像素。
  • offsetLeft属性:
    此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。
  • offsetWidth属性:
    此属性可以获取元素的宽度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
    返回值是一个整数，单位是像素。
    此属性是只读的。
  • offsetHeight属性:
    此属性可以获取元素的高度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
    返回值是一个整数，单位是像素。
  • clientX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 不随滚动条滚动而改变；
  • clientY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 不随滚动条滚动而改变；

计算如图

原生javascript实现图片放大镜

代码

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>
</head>
<style>      
    * {        
	padding: 0;        
	margin: 0;       
     }
    .leftcon {        
        width: 350px;     
        height: 350px;        
        position: relative;        
        float: left;        
        box-shadow: 0px 0px 10px 0px rgb(65, 64, 64);        
        margin: 20px 15px;    
     }
    .picl {      
      display: block;        
      width: 100%;        
      height: 100%;   
    }
    .mask {     
       width: 175px;   
       height: 175px;        
       background-color: #000;        
       opacity: 0.5;        
       position: absolute;        
       top: 0;        
       left: 0;        
       cursor: move;        
       display: none;    
     }
    .rightcon {     
       width: 350px;        
       height: 350px;        
       position: relative;        
       float: left;        
       overflow: hidden;        
       margin-top: 20px;        
       display: none;    
    }
    .picr {      
      display: block;        
      width: 200%;        
      height: 200%;        
      position: absolute;        
      left: 0px;        
      top: 0px;    
    }
 </style>
<body>    
	<div class="leftcon" id="leftbox">       
	   <img src="pic2.jpg" class="picl">        
	       <div class="mask"></div>    
	</div>      
	<div class="rightcon" id="rightbox">     
	   <img src="pic2.jpg" class="picr">    
	</div>   
	 <script>        
	     var leftcon = document.getElementById('leftbox');        
	     var rightcon = document.getElementById('rightbox');        
	     var mask = document.getElementsByClassName('mask')[0];        
	     var rpic = document.getElementsByClassName('picr')[0];
         function getPoint(e) {         
            var e = e || window.event;            
            var top = e.clientY - leftcon.offsetTop - mask.offsetHeight / 2;//计算方法如上图                 
            var left = e.clientX - leftcon.offsetLeft - mask.offsetWidth / 2;
            var maxtop = leftcon.offsetHeight - mask.offsetHeight; //获取小滑块最大纵向移动距离            
            var maxleft = leftcon.offsetWidth - mask.offsetWidth;  //获取小滑块最大横向移动距离            
            var mintop = 0;  //获取小滑块最小纵向移动距离            
            var minleft = 0;  //获取小滑块最大纵向移动距离            
            var mvtop;  //定义小滑块的纵向移动距离            
            var mvleft;  //定义小滑块的横向移动距离
            if (top < mintop) {            
                mask.style.top = mintop + "px";          
                mvtop = mintop;           
           } else if (top > maxtop) {          
                 mask.style.top = maxtop + "px";                
                 mvtop = maxtop;      
           } else {          
                 mask.style.top = top + "px";        
                 mvtop = top;
            }            
            if (left < minleft) {        
                    mask.style.left = minleft + "px";                
                    mvleft = minleft            
           } else if (left > maxleft) {        
                   mask.style.left = maxleft + "px";                
                   mvleft = maxleft       
           } else {          
                   mask.style.left = left + "px";                
                   mvleft = left;       
           }            
              rpic.style.top = -mvtop * 2 + "px";    
              rpic.style.left = -mvleft * 2 + "px";     
          }
        leftcon.onmouseover=function(e){       
             var e = e||window.event;         
             rightcon.style.display="block"; 
             mask.style.display="block";        
             getPoint(e);            
        }        
        leftcon.onmouseout=function(e){      
              var e = e||window.event;   
              rightcon.style.display="none";            
              mask.style.display="none";     
        }        
        leftcon.onmousemove = function(e){    
            var e=e||window.event;         
            getPoint(e);    
        }    
        </script>
    </body>
</html>

相关推荐