bootstrap能否实现 手机端滑动效果,滑动到下一页

jgestures.js插件可以解决,只需要引入一个JS文件
<script src="js/jgestures.min.js"></script>
下面是JS代码:
$(document).ready(function(){
//手势右滑
$('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){
// 执行一些动作...
})
//手势左滑
$('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){
// 执行一些动作...
})
//单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)
$('#myCarousel').bind('swipeone',function(){
// 执行一些动作...
})
});

=====================================
jGestures插件允许你如同原生的jQuery事件一样监听以下事件:'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向)。当然,部分事件在PC浏览器上可以通过转换实现。比如 "tapone" 事件可以被 "clicking"事件触发,鼠标手势也可以产生"swipe"事件。

---------------------------------
基本的用法是:
jQuery('#swipe').bind('swipeone',eventHandler);

其中前半部分是确定需要绑定到的元素,后半部分中,swipeone是它支持的一些手势,eventHandler是要发生的事件。

支持的事件有:
Orientationchange
设备的方向变化
(Pinch)两指的缩放
pinch
pinchopen
两手指放大,然后触点离开设备
pinchclose
两手指缩小,然后触点离开设备
(rotate)两指的旋转
rotatecw
两手指旋转顺时针,然后触点离开设备
rotateccw
两手指旋转逆时针,然后触点离开设备
(swipe)滑动手势
swipemove
swipeone
swipetwo
swipethree
swipefour
1~4个触点的滑动
swipeup
swiperightup
swiperight
swiperightdown
swipedownswipeleftdown
swipeleft
swipeleftup
朝不同方向的滑动
(tap)
tapone
taptwo
tapthree
1~3次点击
(shake)摇动设备
shake
摇动设备
shakefrontback
前后摇动
shakeleftright
左右摇动
shakeupdown
上下摇动

遇到的一些问题:

尝试了左右滑动的swipeleft和swiperight,但是发现并没有效果,然后在swiperight的基础上还绑定了swiperightup和swipeleftdown两个事件

jQuery('#swipe').bind('swiperight swiperightupswiperightdown',eventHandler

然后就滑动事件就顺利触发了。猜想可能是left的触发条件区间比较小,垂直位置上移动距离过大就被指向了leftup或者leftdown的事件了。

可以禁止本来的滑动,防止干扰

event.preventDefault();

配合响应式布局

支持手势之后,再配合以响应式布局的页面,在移动端的展示就可以更加接近于App
因为项目在移动端只是以内容展示为主的,主要的操作编辑不在移动端,没有复杂的操作。考虑到只是原型,这样可以免去了客户端的开发,学习成本低了好多。

=================================
事件列表

orientationchange
代表设备顺时针或者逆时针旋转.此事件可以被设备触发,可能使用的是重力传感器.

pinch
缩放手势(两个手指在屏幕上的相对运动)

rotate
旋转手势(两个手指顺时针或者逆时针旋转)

swipemove
在正在滑动时触发(在设备屏幕上移动手指,比如:拖动)

swipeone
单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)

swipetwo
两点滑动(两个手指在屏幕上方向一致的滑动)

swipethree
三点滑动(三个手指在屏幕上方向一致的滑动)

swipefour
四点滑动(四个手指在屏幕上方向一致的滑动)

swipeup
向上滑动,在严格的向上滑动手势完成后触发

swiperightup
向右上角滑动,在向右且向上的滑动手势完成后触发

swiperight
向右滑动,在严格的向右滑动手势完成后触发

swiperightdown
向右下角滑动,在向右且向下的滑动手势完成后触发

swipedown
向下滑动,在严格的向下滑动手势完成后触发

swipeleftdown
向左下角滑动,在向左且向下的滑动手势完成后触发

swipeleft
向左滑动,在严格的向左滑动手势完成后触发

swipeleftup
向左上角滑动,在向左且向上的滑动手势完成后触发

tapone
在单个手指轻点的手势后触发

taptwo
在两个手指一起轻点的手势后触发

tapthree
在三个手指一起轻点的手势后触发

pinchopen
撑开手势,当两个手指撑大并离开设备时触发.

pinchclose
捏紧手势,当两个手指捏紧并离开设备时触发.

rotatecw
两个手指顺时针旋转并且离开屏幕时触发(two fingers rotating clockwise)

rotateccw
两个手指逆时针旋转并且离开屏幕时触发 (two fingers rotating counterclockwise)

shake
当检测到设备正在摇晃时触发

shakefrontback
当检测到摇晃动作,且可以被解读为前后移动之时触发.

shakeleftright
当检测到摇晃动作,且可以被解读为左右移动之时触发.

shakeupdown
当检测到摇晃动作,且可以被解读为上下移动之时触发.

bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件的更多相关文章

  1. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  2. 推荐一款手机端的图片滑动插件iSlider

    首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html 这是demo 众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢? ...

  3. 解决Bootstrap 试用手机端 布满全屏

    @media (max-width: 767px) { body{ margin: 0; padding: 0; } } @media (max-width: 970px) { body{ margi ...

  4. layUI中layDate控件兼容性问题(手机端没有效果,不显示)

    使用layDate插件发现在PC端无问题,然而在适配移动端时,发现点击input时,laydate渲染出的时间控件有时候没有反应,后发现只需在render里加入trigger: 'click',即可以 ...

  5. 调用手机端硬件功能 汇总(android/ios) Native.js示例汇总

    Native.js示例汇总 NJS Native.JS 示例 Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成.这篇帖子的目的就是汇总各种写好的NJS代码,方便w ...

  6. 手机端仿ios的银行下拉脚本五

    代码 <script> $('#bankName').click(function(){ var $this = $(this); new Picker({ "title&quo ...

  7. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  8. JavaScript 判断手机端访问并跳转 redirect mobile

    假如你的手机端网站在 /m 目录下 (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer| ...

  9. JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

随机推荐

  1. ELK-Python(一)

    不具有通用性,留作纪念. [root@GXB-CTRLCENTER python]# cat insert_active_user.py #!/usr/bin/env python # -*- cod ...

  2. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  3. Java Map 按Key排序和按Value排序

    Map排序的方式有很多种,这里记录下自己总结的两种比较常用的方式:按键排序(sort by key), 按值排序(sort by value). 1.按键排序 jdk内置的java.util包下的Tr ...

  4. 建字段_添加数据_生成json.php

    <?php header("Content-Type:text/html;charset=utf8"); class db{ static $localhost = &quo ...

  5. shell eval用法

    转自:http://blog.csdn.net/w_ww_w/article/details/7075867 eval可读取一连串的参数,然后再依参数本身的特性来执行.eval是shell内建命令,可 ...

  6. Hadoop学习(2)-- HDFS

    随着信息技术的高度发展,数据量越来越多,当一个操作系统管辖范围存储不下时,只能将数据分配到更多的磁盘中存储,但是数据分散在多台磁盘上非常不方便管理和维护,迫切需要一种系统来管理多台机器上的文件,因此诞 ...

  7. pyOpenSSL0.13安装失败

    /usr/lib64/python2.4/distutils/dist.py:236: UserWarning: Unknown distribution option: 'zip_safe' war ...

  8. Swift游戏实战-跑酷熊猫 07 平台的移动

    这节内容我们来实现平台是怎么产生移动动画的. 要点 1 利用数组存放平台 var platforms=[Platform]() 2 有新的平台产生存放进数组 platforms.append(plat ...

  9. 树形DP+贪心(乱搞)(HDU4714)

    题意:给出一个树形图,要求把该树形成一个环最少的步骤(断开一条边和形成一条边都需一步) 分析:很明显,要想把树形成一个环,就要先把其分裂成m条子链之后把子链形成环需要的步骤是2*m+1,所以只需要m最 ...

  10. C# 问题解决思路--《数组bytes未定义》,ASP.NET页面加载顺序

    好久没写博客了,废话不多说,直接说问题. 问题发生情况,首先这个是老项目,然后我是第一次修改.当我解决了各种引用,数据库配置之后等类似的问题,我启动的项目的时候,无任何问题,但是当我点击页面的按钮的时 ...