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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
Javascript节点关系实例分析
May 15 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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
YII中assets的使用示例
2014/07/31 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
js实现数组转换成json
2015/06/26 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
送你43道JS面试题(收藏)
2019/06/17 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
浅谈Django的缓存机制
2018/08/23 Python
python实现顺序表的简单代码
2018/09/28 Python
python 读取、写入txt文件的示例
2020/09/27 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
2014年中班元旦活动方案
2014/02/14 职场文书
校园公益广告语
2014/03/13 职场文书
聚美优品励志广告词
2014/03/14 职场文书
诚信考试标语
2014/06/24 职场文书
物流专业求职信
2014/06/30 职场文书
学校工作推荐信范文
2014/07/11 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书