基于Angular.js实现的触摸滑动动画实例代码


Posted in Javascript onFebruary 19, 2017

先上图:

基于Angular.js实现的触摸滑动动画实例代码

这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件。结合css3的transition实现的动画。ng-class为切换写好的动画的className.

<!DOCTYPE HTML>
<html ng-app="myapp">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
 <title>Angular2</title>
 <script type="text/javascript" charset="utf-8" src="angular.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="angular-touch.min.js"></script>
 <style type="text/css">
 *{margin:0px;padding:0px;}
 .box{position:relative;left:0px;margin:10px 0px;width:100%;height:100px;background:red;transition:all .5s;;}
 .swipeleft{left:-100%;}
 </style>
 <script type="text/javascript" charset="utf-8">
 angular.module("myapp",["ngTouch"]).controller("Controller",[function(){
 var self = this;
 self.swipeLeft = function(){
 return (self.className = "swipeleft");
 }
 }]);
 </script>
 </head>
 <body>
 <ul>
 <li ng-controller="Controller as con" class="box box1" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 <li ng-controller="Controller as con" class="box box2" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 <li ng-controller="Controller as con" class="box box3" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 <li ng-controller="Controller as con" class="box box4" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 </ul>
 </body>
</html>

以上所述是小编给大家介绍的基于Angular.js实现的触摸滑动动画实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
js使用ajax读博客rss示例
May 06 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
理解javascript封装
Feb 23 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 #Javascript
jQuery实现一个简单的轮播图
Feb 19 #Javascript
js 博客内容进度插件详解
Feb 19 #Javascript
ajax接收后台数据在html页面显示
Feb 19 #Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 #Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 #Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
mysql limit查询优化分析
2008/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
TypeScript具有的几个不同特质
2015/04/07 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python快速排序算法实例分析
2017/11/29 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
测试时代收集的软件测试面试题
2013/09/25 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
会计助理的岗位职责
2013/11/29 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang