基于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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
vue prop属性传值与传引用示例
Nov 13 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
Python中itertools模块用法详解
2014/09/25 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
演讲主持词
2014/03/18 职场文书
班级文化建设标语
2014/06/23 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL