基于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 Validation实例代码 让验证变得如此容易
Oct 18 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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编写发红包程序
2015/07/22 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery实现跨域
2015/02/03 Javascript
js实现简单计算器
2015/11/22 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python Django模板的使用方法
2016/01/14 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python使用turtle库绘制树
2018/06/25 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
小学生自我鉴定
2013/10/12 职场文书
程序员岗位职责
2013/11/11 职场文书
交通安全教育制度
2014/02/02 职场文书
三八节主持词
2014/03/17 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
成绩单评语
2015/01/04 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
文艺委员竞选稿
2015/11/19 职场文书