Angular-Touch库用法示例
程序员文章站
2022-09-09 08:40:07
本文实例讲述了angular-touch库用法。分享给大家供大家参考,具体如下:
angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。
先在页面...
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
上一篇: 教你在QQ空间挂马
推荐阅读
-
Ajax动态加载数据库示例
-
python3解析库BeautifulSoup4的安装配置与基本用法
-
Python画柱状统计图操作示例【基于matplotlib库】
-
随机获取oracle数据库中的任意一行数据(rownum)示例介绍
-
JavaScript中join()、splice()、slice()和split()函数用法示例
-
Java编程实现向文本文件中读取数据之Scanner用法示例
-
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
-
ThinkPHP框架基于PDO方式连接数据库操作示例
-
JS字典Dictionary类定义与用法示例
-
python利用标准库如何获取本地IP示例详解