Angular-Touch库用法示例


Posted in Javascript onDecember 22, 2016

本文实例讲述了Angular-Touch库用法。分享给大家供大家参考,具体如下:

Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。

先在页面上弄个div

<div id="content" align="center" ng-app="imageApp" image-controller="">
    <p style="position: absolute; width: 100%; margin-top: 30px;z-index: -1;">
      <img id="show"src="assets/image/logo.jpg" />
    </p>
</div>

引入两个库

<script type="text/javascript" src="js/angular/1.4.6/angular.min.js" ></script>
<script type="text/javascript" src="js/angular/1.4.6/angular-touch.min.js" ></script>

注册事件

try{
  angular.module('imageApp',['ngTouch'])
    .directive('imageController',['$swipe',function($swipe){
      return {
        restrict:'EA',
        link:function(scope,ele,attrs,ctrl){
          var startX,startY,locked=false;
          $swipe.bind(ele,{
            'start':function(coords){
              startX = coords.x;
              startY = coords.y;
            },
            'move':function(coords){
              var delta = coords.x - startX;
              if(delta<-300 && !locked){
                console.log('trun right');
              }else if(delta>300 && !locked){
                console.log('trun left');
              }
            },
            'end':function(coords){
            },
            'cancel':function(coords){
            }
          });
        }
      }
    }
  ]);
}catch(e){
  console.error(e);
}

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
Json按某个键的值进行排序
Dec 22 #Javascript
js实现登录验证码
Dec 22 #Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 #Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 #Javascript
基于Javascript倒计时效果
Dec 22 #Javascript
JS前端加密算法示例
Dec 22 #Javascript
jQuery手指滑动轮播效果
Dec 22 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php 类自动载入的方法
2015/06/03 PHP
js arguments,jcallee caller用法总结
2013/11/30 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
Python中的元类编程入门指引
2015/04/15 Python
Python的randrange()方法使用教程
2015/05/15 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python中的TCP socket写法示例
2018/05/11 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Python微信操控itchat的方法
2019/05/31 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
keras中的backend.clip用法
2020/05/22 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
什么是servlet链?
2014/07/13 面试题
社区中秋节活动方案
2014/01/29 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
班组建设经验交流材料
2014/05/12 职场文书
银行竞聘报告范文
2014/11/06 职场文书
公司搬迁通知
2015/04/20 职场文书
投资合作意向书范本
2015/05/08 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers