jQuery(十三)移动端js事件和swiper库

移动端js事件

移动端的操作方式和PC端是不同的的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件:

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

移动端一般有三种操作,点击、滑动、拖动,这三个操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实现这三种操作,可以使用封装成熟的js库。

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的javascript库,它与jQuery有着类似的api。如果你会用jquery,那么你也会用zepto。zepto的一些可选功能是专门针对移动端浏览器的;他的最初目标实在移动端提供一个精简类似jQuery的js库。(现在不怎么用了,因为现在手机性能越来越好,可以支持较大的jQuery库了。)

swiper

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

  • swiper使用方法:
    如果页面应用了jQuery或者zepto,就引用swiper.jquery.min.js,他的容量比swiper.min.js小,话要引用swiper.min.css,在主页面样式之前引用。更多的使用方法,可以查看中文官网http://www.swiper.com.cn/

  • swiper常用参数:

  1. initialSlide:初始索引值,从0开始
  2. direction: 滑动方向horizontal | vertical
  3. speed:滑动速度,单位ms
  4. autoplay:设置自动播放及播放时间
  5. autoplayDsableOnlnteraction: 用户操作swiper后是否还自动播放,默认是true,不再自动播放为false
  6. pagination:分页圆点
  7. paginationClickable:分页圆点是否点击
  8. prevButton:上一页箭头
  9. nextButton:下一页箭头
  10. loop:是否首位衔接
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值