angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽
更新時間:2017年02月24日 14:27:05 作者:zxj娟娟
這篇文章主要為大家詳細(xì)介紹了angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了angularjs點擊圖片放大預(yù)覽的具體代碼,供大家參考,具體內(nèi)容如下
承接上一篇文章
/*圖片點擊放大再點擊還原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名稱,寫在需要用到的地方img中即可實現(xiàn)放大圖片</span> 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"; }) } } });
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS實現(xiàn)標(biāo)簽頁的兩種方式
這篇文章分別給大家介紹了AngularJS實現(xiàn)標(biāo)簽頁的兩種方式,一種是通過普通指令實現(xiàn)標(biāo)簽頁,另外一種是通過自定義指令實現(xiàn)的標(biāo)簽頁,有需要的朋友們可以來參考借鑒,下面來一起看看吧。2016-09-09Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08requirejs AngularJS結(jié)合使用示例解析
這篇文章主要為大家介紹了requirejs AngularJS結(jié)合使用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06AngularJS基于factory創(chuàng)建自定義服務(wù)的方法詳解
這篇文章主要介紹了AngularJS基于factory創(chuàng)建自定義服務(wù)的方法,結(jié)合實例形式分析了AngularJS使用factory創(chuàng)建自定義服務(wù)的具體步驟、操作技巧與相關(guān)注意事項,需要的朋友可以參考下2017-05-05詳解Angular CLI + Electron 開發(fā)環(huán)境搭建
本篇文章主要介紹了Angular CLI + Electron 開發(fā)環(huán)境搭建,具有一定的參考價值,有興趣的可以了解一下2017-07-07AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法,有興趣的小伙伴可以參考下2016-09-09