移动端js事件和库

1.touch事件

(1)touchstart 手指放到屏幕触发
(2)touchmove 滑动触发
(3)touchend 离开触发
(4)touchcancel 系统取消touch事件的时候触发,比较少用

一般时封装使用来实现这三种操作,可以使用封装成熟的js库

2.zeptojs

是一个轻量级的针对现代高级浏览器的JavaScript库,它与jQuery有着类似的api。会用jQuery就会zeptojs。一些可选功能时专门针对移动端浏览器的;它的最初目标是在移动端提供一个精简的类似jQuery的js库

官网:http://zeptojs.com
中文api:http://www.css88.com/doc/zeptojs_api/
默认版本包括core、Ajax、event、form、IE模块
自定义构建:http://github.e-sites.nl/zeptobuilder/

注意:了解即可

3.swiper

是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果。swiper版本2.x支持低版本浏览器,3.x放弃支持低版本,适用应用在移动端

中文网:http://www.swiper.com.cn/

4.swiper参数设置

(1)initialSlide:初始索引值,从0开始
(2)direction:滑动方向 horizontal | vertical
(3)speed:滑动速度,单位ms
(4)autoplay:设置自动播放及播放时间
(5)autoplayDisableOnlnteraction:用户操作swiper后是否还自动播放,默认是true,不再自动播放
(6)paginnation:分页圆点
(7)paginationClickable:分页圆点是否点击
(8)prevButton:上一页箭头
(9)nextButton:下一页箭头
(10)loop:是否首尾衔接

$(function(){
var swiper = new Swiper(‘.swiper-container‘, { /创建一个swiper,父级div类,分页类,按钮类/
pagination: ‘.swiper-pagination‘,
prevButton: ‘.swiper-button-prev‘,
nextButton: ‘.swiper-button-next‘,
// 初始的幻灯片是第几张
initialSlide :0,

                 // 小圆点是否可点击
                  paginationClickable: false,

                  //是否连续播放(设置false会在最后一张返回)
                  loop: true,

                  // 设置多长时间间隔播放一张
                  autoplay:3000,

                  // 用户操作后还是否自动播放
                  autoplayDisableOnInteraction:true
            })
    });

原文地址:http://blog.51cto.com/13742773/2342520

时间: 2024-10-18 07:19:57

移动端js事件和库的相关文章

移动端JS事件、移动端框架

一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发   touchstart 2.手指放在屏幕上滑动式触发    touchmove 3.手指离开屏幕时触发.  touchend 4.系统取消touch事件的时候触发,比较少用.  touchcancel 二.移动端一般有三种操作:点击.滑动.拖动,这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实

移动端JS库

今天整理下移动端的js库,然后闷头研究一种好了. 从别的地扒下来的,笔记. 1. jQuery Mobile jQuery Mobile快速开发出支持多种移动设备的Mobile应用用户界面.它是当前最流行的移动开发框架. jQuery Mobile给主流移动平台带来jQuery核心库,会发布一个完整统一的jQuery移动UI框架.用jQuery Mobile为移动设备(包括智能手机和平板电脑)开发网站应用程序,RSS阅读器等应用. 假如你不熟悉jQuery,可以选择 MooTools Mobil

js常用工具库XCLJsTool v1.0发布

最近有空,整了一个js的工具库,还没有正式用于项目中,自己也没有时间写测试用例,想了一下,还是贴出来给大家看看,如果有问题,请留言,非常感谢!项目我放在了github上面,会经常更新的,过段时间会发布一版! /** * 欢迎使用本程序,您可以任意修改.复制.分享本程序所有代码,只需要保留本注释即可,谢谢! * 项目地址:<span style="color:#ff0000;">https://github.com/xucongli1989/XCLJsTool</spa

node.js 事件发射器模式

目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEmitter 前言: 今天事儿太多了,没有发太多的东西.不好意思了各位. 本篇主要介绍Node.js中的事件驱动,至于Node.js事件概念的东西,太多了. 本系列课程主要抱着的理念就是,让大家慢慢的入门,我也尽量写的简单一点. 所以呢,本文事件驱动,大家的目标应该是:理解Node.js的事件驱动.会

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名

C#-WebForm-JS知识:基础部分、BOM部分、DOM部分、JS事件

---恢复内容开始--- 一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么关系? 没有任何关系 3.JS 能做什么事情? 能控制浏览器 BOM 控制元素 DOM JS不能做什么? 不能操作文件(读取.创建.删除) 不能直接访问数据库 扩展:node.js - 一个开发平台,通过这个平台可以开发常规的web服务端,是一块非常轻量级的运行环境 JQu

移动端——JS(一)

javascript(简称js)语言在移动前端可以说必不可少,许多效果都是和js相关的,包括现在移动端的一些框架:jqmobi.jqtouch.sencha touch.jquerymobile等等.都是基于js编写的. 暂时不讨论这些框架,主要讨论一下部分常用的js事件在移动端的使用.举几个例子: 1.隐藏地址导航栏: <script> // 该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字) function addLoa

JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板 2.使用chrome调试 在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息.点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置.不过这种方法并非总是可用,下面

js页码生成库,一个适合前后端分离的页码生成器

原文:js页码生成库,一个适合前后端分离的页码生成器 前言 上星期写的任务里面有需要进行分页的处理,git搜索了一番,没有觉得合适的,于是自己临时写了个分页的算法. 然后等闲下来的时候,决定把分页进行优化并推广.于是乎,一个适合前后端分离的页码生成器就这样出来了. 先别废话了,直接上 git 地址 和 demo 地址.看官果断点击进去瞧瞧看.项目主页的 readme 文档的自动排版将更好. 先讲讲设计思想 整个开发流程围绕事件绑定进行开发. 脱离 callback 回调这种回调方法,直接使用 事