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


Posted in Javascript onFebruary 24, 2017

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

效果图:

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

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

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
ext form 表单提交数据的方法小结
Aug 08 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
javascript表单事件处理方法详解
May 15 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
js实现导航吸顶效果
Feb 24 #Javascript
canvas绘制多边形
Feb 24 #Javascript
angularjs实现多张图片上传并预览功能
Feb 24 #Javascript
Angularjs分页查询的实现
Feb 24 #Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 #Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
You might like
PHP 开发工具
2006/12/06 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python协程的用法和例子详解
2017/09/09 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python实现狄克斯特拉算法
2019/01/17 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Django的CVB实例详解
2020/02/10 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
国际贸易求职信
2014/07/05 职场文书
关于读书的活动方案
2014/08/14 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang