基于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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
javascript中的new使用
Mar 20 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
js与applet相互调用的方法
Jun 22 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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作的文本留言本的例子(一)
2006/10/09 PHP
PHP源码之explode使用说明
2011/08/05 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
再探JavaScript作用域
2014/09/24 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Django 2.0版本的新特性抢先看!
2018/01/05 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python文字转语音的实例代码分析
2019/11/12 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
办护照工作证明范本
2014/01/14 职场文书
公务员年度考核评语
2014/12/31 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书