码迷,mamicode.com
首页 > 移动开发 > 详细

移动端js事件和库

时间:2019-01-15 10:46:26      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:api   精简   默认   touch   单位   屏幕   成熟   封装   loop   

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
            })
    });

移动端js事件和库

标签:api   精简   默认   touch   单位   屏幕   成熟   封装   loop   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!