基于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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
如何强制垃圾回收
2015/10/06 面试题
毕业生学校推荐信范文
2014/05/21 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2014年环保局工作总结
2014/12/11 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL