js实现图片放大展示效果

图片放大展示效果的实现代码，可动态生成图片，每次点击看原图的时候为当前id里面的图片

HTML

  
    
    
    
    
      *{
 margin: 0;
 padding: 0;
      }
      #picOne img{
 width: 200px;
 height: 200px;
      }
      .mask-img {
 display: none; 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 z-index: 10; 
 background: rgba(0,0,0,.2);
      }
      
      .picture{
 display: none; 
 position: fixed; 
 top: 50%; left:50%; 
 transform: translate(-50%,-50%); 
 width: 960px; 
 height: 700px; 
 line-height: 700px; 
 text-align:center; 
 background: #666; 
 z-index: 20;
      }
      .picture .phone{
 vertical-align: middle; 
 max-width: 868px; 
 max-height: 670px; 
      }
      .picture .left{
 position: absolute; 
 left: 10px; 
 top: 320px; 
 width: 25px; 
 height: 40px; 
 line-height: 40px;
      }
      .picture .right{
 position: absolute; 
 right: 10px; 
 top: 320px; 
 width: 25px; 
 height: 40px; 
 line-height: 40px;
      }
    
  
  
      
      　　　
  
 
  

    
    
    
    
      
      
      
    
  
  

< 向左点击事件

>  向右点击事件

第一张效果图

中间图片效果图

最后一张效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。