jQuery Mobile学习笔记02——jQuery Mobile实现监听左右滑动变换图片

原创 2016年08月28日 23:40:25

<--------------------------------------------------------------->

1.效果展示

通过在图片上左右滑动达到切换图片的效果。

 

2.代码

这里我们要借用jQuery Mobile来实现这一功能,因为jQuery中没有自带检测左右滑动这一功能。

将下面这段代码直接放入$(document).ready(function(){ });中,即可监听在“#clothimg”上的左右滑动事件。

 

3.注意:

1当然需要引入jQuery Mobile相关文件。

 

(2)另外在实现改变图片时,要注意指定的图片地址方法,此处因为我将js代码独立于html之外,如果还是使用带 __ROOT__ThinkPHP框架)去指定图片地址,则图片将不会加载成功。


4.拓展:

jQuery Mobile还有很多其他相关触控事件:

1tap 事件在用户敲击某个元素时触发

 

2taphold 事件在用户敲击某个元素并保持一秒时被触发

 

3swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发

 

<--------------------------------------------------------------->

相关文章推荐

监听手指左右滑动屏幕的事件,封装好了一个类

左右滑动是智能手机最常用的动作,在此简单的封装了一下,以后直接拿来用就可以了。 简单的只需要几行就可以了,下面那个类是封装好了的。 package com.example.test; i...

jQuery Mobile学习笔记(八)——安装及离线

本章学习创建一个不通过应用商店发布的离线Web应用。使用这种方案,用户可以通过手机浏览器访问Web应用然后将它安装到手机上,下一次可以通过同样的URL或者应用图标来访问这个应用时,应用将不再从服务器端...

《jQuery Mobile即学即用》学习笔记01——框架起步

参考网页: http://www.w3school.com.cn/h.asp 参考书籍: 《 jQuery Mobile即学即用 》 工具:Dreamweaver 优点:   1.使用Dreamwe...

jquery mobile学习笔记——网格布局

3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局、折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化。 3.4.1 网格...
  • FS_sky
  • FS_sky
  • 2014年05月03日 22:45
  • 1377

jQuery Mobile学习笔记(一)——移动平台

jQuery Mobile概览性知识

jQuery Mobile学习笔记(七)——主题与打包

这一章介绍JQM主题和JQM APP的打包:主题JQM允许开发者通过调整主题和CSS来定制整套用户界面。JQM的每一个样式都能用CSS来覆盖。主题是一组配色方案,包括 文字颜色 背景颜色和渐变 字体 ...

jQuery Mobile学习笔记(五)——表单组件

jQueryMobile中表单组件

jquery mobile 学习笔记——入门基础(一)

本人目前在做微信服务平台,
  • FS_sky
  • FS_sky
  • 2014年04月27日 23:14
  • 899

jQuery Mobile 学习笔记(一)

jQuery Mobile 学习笔记(一),页面加载属性、导航栏、列表、表单、表格

jQuery Mobile 框架相关学习笔记(一)【开发环境篇】!

废话几句:接触web前端也有快1年半了,本职是dot Net 一枚,由于公司发展需要,被迫学习web前端相关,初入计算机也是接触的网页设计制作,觉得做前端给我不是压力很大,本身也是后端开发,在前端js...
  • kvkens
  • kvkens
  • 2013年04月16日 11:19
  • 863
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Mobile学习笔记02——jQuery Mobile实现监听左右滑动变换图片
举报原因:
原因补充:

(最多只允许输入30个字)