欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

angularjs点击图片放大实现上传图片预览

时间:2021-01-11 11:00:26|栏目:AngularJS|点击:

本文实例为大家分享了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"; 
   }) 
  } 
 } 
}); 

效果图:

上一篇:Angular4 组件通讯方法大全(推荐)

栏    目:AngularJS

下一篇:AngularJs bootstrap搭载前台框架――js控制部分

本文标题:angularjs点击图片放大实现上传图片预览

本文地址:http://www.codeinn.net/misctech/43514.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有