js——移动端js事件、zepto.js
1. touchstart : 手指放到屏幕上时触发
2. touchmove : 手指在屏幕上滑动时触发
3. touched : 手指离开屏幕时触发
4. touchcancel : 系统取消touch事件时触发,比较少用
移动端一般有三种操作:点击、滑动、拖动,这三种操作一般是组合使用上面4个事件来完成。可以使用封装成熟的js库——zepto.js
这个库有与juquery类似的api,专门针对移动端浏览器的轻量级js库。
中文网站:http://www.css88.com/doc/zeptojs_api/
可以定制: http://github.e-sites.nl/zeptobuilder/
tap元素类似click,但是比click快
longtap 当一个元素被按超过750ms触发
swipe \ swipeLeft \ swipeRight \ swipeDown 当元素被划过时触发(可以选择给定方向)
不知道为什么,定制js那个网站上不去,所以我下了touch.js和fx.js,完成滑动和动画。
一个滑动删除的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0
maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript" src="js/fx.js"></script>
<style type="text/css"> .list{
width:98%;
list-style: none;
/*background-color: aquamarine;*/
margin:20px auto 0;
padding:0;
}
.list li{
border-bottom:1px solid #666;
height:40px;
line-height:40px;
/*background-color: hotpink;*/
position: relative;
overflow:hidden;
}
.list li a{
/*background-color: darksalmon;*/
text-decoration:none;
position:absolute;
left:0;
}
.list li span{
background-color:red;
position: absolute;
right:-60px;
color:#fff;
padding:0 10px;
} </style>
<script type="text/javascript">
$(function () {
$('.list li').swipeLeft(function () {
$(this).children('a').animate({left:-60});
$(this).children('span').animate({right:0});
}); $('.list li').swipeRight(function () {
$(this).children('a').animate({left:0});
$(this).children('span').animate({right:-60});
});
// 压扁再删除
$('.list span').tap(function () {
$(this).parent().animate({height:0},function () {
$(this).remove();
})
})
})
</script>
</head>
<body>
<!--relative相对运动本身可以相对自己位置移动-->
<ul class="list ">
<li><a href="#" >新闻标题111111</a><span>删除</span></li>
<li><a href="#">新闻标题2222222222</a><span>删除</span></li>
<li><a href="#">新闻标题333333333</a><span>删除</span></li>
<li><a href="#">新闻标题444444444</a><span>删除</span></li>
</ul>
</body>
</html>
效果展示:
js——移动端js事件、zepto.js的更多相关文章
- 11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- js移动端tap事件封装
这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...
- 移动端手势事件 hammer.JS插件
一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http ...
- 原生js移动端滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Zepto.js touch模块深入分析 解决手机点击事件
源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...
- Zepto.js库touch模块代码解析
Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...
- Zepto.js touch模块深入分析
目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...
- zepto.js的基本介绍与使用
最近看到了一篇文章,是介绍一种新的js框架,名为zepto.js,他适用于移动设备已经桌面浏览器除了ie系列的.. 他兼容jquery的API,所以学起来或用起来并不吃力.他比jquery的优势在于1 ...
- zepto.js
// Zepto.js// (c) 2010-2016 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license. ...
随机推荐
- Javascript常用的设计模式详解
Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...
- Oracle RAC TAF 无缝failover
理论背景: TAF( Transparent Application Failover ) allows oracle clients to reconnect to a surviving inst ...
- 11g 如何添加,替换,移除,迁移 OCR ?
一: 增加 裸设备上,创建至少280MB的裸设备,权限是640,属主是root:oinstall共享文件系统 Or NFS,创建空文件,权限是640,属主是root:oinstall root用户执行 ...
- 洛谷【P1480】A/B Problem
题目传送门:https://www.luogu.org/problemnew/show/P1480 高精除低精板子题,灵性地回忆一下小学时期列竖式的草稿纸即可. 时间复杂度:\(O(len)\) 空间 ...
- 研华 RISC超低功耗3.5”单板电脑
产品简介: 这是一款搭载TI Sitara AM3358 Cortex-A8 1GHz高性能处理器的RISC 3.5”单板电脑.RSB-4221是一款稳定可靠.性能强大的低功耗平台,专为各种需要丰富I ...
- spring扩展点之四:Spring Aware容器感知技术,BeanNameAware和BeanFactoryAware接口,springboot中的EnvironmentAware
aware:英 [əˈweə(r)] 美 [əˈwer] adj.意识到的;知道的;觉察到的 XXXAware在spring里表示对XXX感知,实现XXXAware接口,并通过实现对应的set-XXX ...
- 面向对象要点(this关键字)
package day07; public class ThisKeywords { private String name; private void Foo(String name) { this ...
- Ajax前端调后台方法
后台对当前页面类进行注册 Ajax.Utility.RegisterTypeForAjax(typeof(Login));//Login 当前类名 在方法上面加 [Ajax.AjaxMethod(Aj ...
- .NET生成ICO图标
using System; using System.Collections.Generic; using System.Web; using System.Drawing; using System ...
- 项目积累demo-01
1 搭建Spring-Boot项目 在这里我使用intellij新建spring boot工程: 点击next; 输入Group以及artifact之后.点击next.之后点击web.接着finish ...