发布于 2017-06-26 05:53:39 | 89 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的AngularJS教程,程序狗速度看过来!

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


这篇文章主要为大家详细介绍了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"; 
   }) 
  } 
 } 
}); 

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phperz。



相关阅读 :
angularjs点击图片放大实现上传图片预览
angularjs实现多张图片上传并预览功能
js实现点击图片改变页面背景图的方法
Angular中封装fancyBox(图片预览)遇到问题小结
angularjs客户端实现压缩图片文件并上传实例
通过AngularJS实现图片上传及缩略图展示示例
AngularJS实现按钮提示与点击变色效果
AngularJS向后端ASP.NET API控制器上传文件
JS实现点击颜色块切换指定区域背景颜色的方法
angular2-image-upload ng2图片上传插件
AngularJS 文件上传控件 ng-file-upload详解
Angular下H5上传图片的方法(可多张上传)
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务