angularjs点击图片放大实现上传图片预览
本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下
承接上一篇文章
/*图片点击放大再点击还原*/angular.module('routerModule ').指令(' enlargePic ',function(){//span style=' font-family : Arial,Helvetica,无衬线;'放大图片指令名称,写在需要用到的地方img中即可实现放大图片/span返回{ restrict: 'AE ',link:函数(作用域,elem){ elem.bind('click '),function($ event){ var img=$ event。srcelement | | $ event。目标;棱角分明。元素(文档。queryselector(').掩码')[0]。风格。display=' block棱角分明。元素(文档。queryselector(').big pic ')[0].src=img.src}) } })。指令(' closePic ',function(){ return { restrict : ' AE ',link: function(scope,elem){ elem.bind('click '),function($ event){ angular。元素(文档。queryselector(').掩码')[0]。风格。显示='无';}) } } });效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:angularjs点击图片放大实现上传图片预览是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。