时间:2021-05-28
本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下
承接上一篇文章
angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</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"; }) } } });效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:html5原生方法先看一下html5原生方法上传和预览图片的实现:
本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下directive.js/**多图片上传及预览指令(需指定图片类名)
需求:当点击图片时,当前图片放大预览,且可以左右滑动实现方式:使用微信小程序图片预览接口我们可以看到api需要两个参数,分别通过下面的data-list和dat
本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码,供大家参考,具体内容如下单图片上传并实现预览.addPerson{l
js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览HTML代码实现功能的js代码//获取图片路劲的方法,兼容多种浏览器,通过crea