angularjs上傳圖片時預覽-點選圖片放大
阿新 • • 發佈:2019-01-26
承接上一篇文章
/*圖片點選放大再點選還原*/ 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關鍵程式碼 <!-- 圖片 --> <div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div> <!-- 圖片放大遮罩層 --> <div class="mask" close-Pic> <div class="mask-box"></div> <div class="big-pic-wrap"> <img src="" alt="" class="bigPic" /> <span class="close-pic"><i class="fa fa-close"></i></span> </div> </div> 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; }