js-触摸屏左右滑动事件,如何能触发pc键盘上的PageUp、PageDown键

问题描述

触摸屏左右滑动事件,如何能触发pc键盘上的PageUp、PageDown键

http://www.ebook.chinafeedepc.org/e.aspx?vid=16

电子杂志翻页问题,pc访问可以用PageUp、PageDown来实现翻页,如何是手机端浏览的时候,用左右触摸滑动来触发PageUp与Pagedown效果。

解决方案

这需要自定义手势,网上demo挺多的,查下就知道了

解决方案二:

看你手机端页面用的什么框架了 基本上都有触屏事件的封装 例如jQuerymobile 就有swipe滑动事件 $("#id").bind("swipeleft",function(){
//左滑了
});
类似这样的 非常简单

时间: 2024-10-24 09:45:53

js-触摸屏左右滑动事件,如何能触发pc键盘上的PageUp、PageDown键的相关文章

javascript Slip.js实现整屏滑动的手机网页_javascript技巧

有了Slip.js,你只管写HTML,CSS,如果逻辑简单,一行JS代码就可以搞定,大大提升了开发的效率.不吹牛,上面的demo,不到半小时我就写好了. 具体怎么做呢?比如有个需求是: 我们有4个页面,每个页面有一张图片,每次手指滑动都切换一整屏. 首先看HTML: <!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body

浅谈移动端之js touch事件 手势滑动事件_javascript技巧

现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.

js实现touch移动触屏滑动事件_javascript技巧

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

js onmousewheel事件多次触发问题解决方法

 我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下: 我最初的代码是这样的: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

slide menu-android 实现滑动菜单时遇到滑动事件不能触发的问题

问题描述 android 实现滑动菜单时遇到滑动事件不能触发的问题 界面里只有个EditText和几个按钮,但是向右滑动时,滑动事件不能发生,直接变成编辑文本框,改成TextView就可以,这样的问题怎么解决? 解决方案 不出意外应该是EditText默认就获取了焦点,导致滑动事件不能响应.比较好的做法是让父控件获取焦点,如设置LinearLayout的focusable 和focusableInTouchMode属性为true 解决方案二: 这种问题还是要把源代码贴上来才能看出来.

js实现浏览器窗口大小被改变时触发事件的方法_javascript技巧

本文实例讲述了js实现浏览器窗口大小被改变时触发事件的方法.分享给大家供大家参考.具体分析如下: 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 复制代码 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span> <script> window.onresiz

js onmousewheel事件多次触发问题解决方法_javascript技巧

我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下: 我最初的代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> div { width: 700px; height: 1000px; } .red { back

网页-html5+js手机触屏事件在一个固定的区域内实现div的移动

问题描述 html5+js手机触屏事件在一个固定的区域内实现div的移动 我想在手机网页上实现在一个固定的区域内有一个div这个div能够随着手指的滑动而改变位置,求各位大神指点迷津.. 解决方案 不知道怎么弄了,以前见别人搞过 解决方案二: .............................................好吧 解决方案三: 貌似不是用div吧是用一个浮动窗口然后他的位置属性随手势改变 解决方案四: 这个可以利用touchstart,touchmove,touchend

前端技术-swiper快速滑动后,滑动事件失效

问题描述 swiper快速滑动后,滑动事件失效 假如有123屏,从2滑动切换屏幕到3时,删除1,新增4在3后面, 慢点滑动的时候没问题,但是一旦滑动快了,这个滑动事件就失效了,求问大神有什么解决办法没?(function(){ var flog = 0; var mySwiper = new Swiper ('.swiper-container' { initialSlide:2 direction: 'horizontal' onSlideNextEnd: function(swiper){/