本文共 1719 字，大约阅读时间需要 5 分钟。

承接上一篇文章

/*图片点击放大再点击还原*/  angular.module('routerModule').directive('enlargePic',function(){//enlargePic指令名称，写在需要用到的地方img中即可实现放大图片    return{          restrict: "AE",          link: function(scope,elem){              elem.bind('click',function($event){                  var img = $event.srcElement || $event.target;                  angular.element(document.querySelector(".mask"))[0].style.display = "block";                  angular.element(document.querySelector(".bigPic"))[0].src = img.src;              })          }      }  })  .directive('closePic',function(){      return{          restrict: "AE",          link: function(scope,elem){              elem.bind('click',function($event){                  angular.element(document.querySelector(".mask"))[0].style.display = "none";              })          }      }  });

html关键代码
   
   
    
   
   
   
    
    
    
    
      
           
          
    
   
css代码/*图片放大遮罩层*/ .mask{     display: none; } .mask-box{     position:absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 80;     opacity: 0.5;     background: #000; } .big-pic-wrap{    position:fixed;    top:50%;    left:50%;    margin-left: -460px;    margin-top: -300px;    width:920px;    height:620px;    padding:10px;    z-index:90;    background:#fff; } .bigPic{     width:900px;     height:600px; }  /*关闭大图按钮*/  .close-pic{     position:absolute;     top:-5px;     right:-5px;     display:inline-block;     width: 35px;     height: 35px;     cursor:pointer;     border-radius:50% !important;     background: #393A3C;     text-align: center;     line-height: 40px;  }  .close-pic:hover{      background: #D43F27;  }  .close-pic>i{  font-size: 25px;   color:#fff;  }