原生js实现网页触屏滑动

【原生js实现网页触屏滑动】的更多相关文章

原生js实现网页触屏滑动

前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件,虽然功能不多,兼容性也不是很好,但是好在不用其他库而且逻辑简单以便于封装自己的功能说明: 元素监听开始滑动事件,获取初始的x,y坐标值.监听滑动事件在滑动过程中监听x,y坐标的值变化.监听停止滑动事件,获得最后的x,y坐标值.然后计算x,y坐标值的变化趋势. 如果x/y的绝对值大于2,说明在x…

自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInterval不太适合做动画.图片滚动这类,不平滑.还是setTimeout或requestAnimateFrame函数做动画效果好. 文档做了移动端兼容,按照7.5rem的视口宽.HTML这个元素的font-size是document.documentElement.clientWidth / 7.5…

JS移动客户端--触屏滑动事件

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

JS移动客户端--触屏滑动事件 banner图效果

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

JS案例之5——移动端触屏滑动

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

js实现touch移动触屏滑动事件

在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类似的对象).这个对象封装一次屏幕触摸,一般来自于手指.它在touch事件触发的时候产生,可以通过touch event handler的event对象取到移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理t…

移动端触屏滑动，JS事件

先了解下移动端的触屏滑动毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan…

手机触屏滑动图片切换插件swiper.js

今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div style="max-width: 640px; margin: 0 auto;"> <div class="swiper-container"> <div class="swiper-wrapper"> <div…

JS移动客户端--触屏滑动事件及js手机拖拽效果

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

Hammer.js移动端触屏框架的使用

hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8…

移动端微信网易触屏滑动回弹菜单(css版)

总结一下: 有点:网易新闻,微信热文都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带) 只支持持续滑动,不支持回弹, iphone垂直滑动第一次不能完全持续滑动到底部:总体不影响使用: 偶尔低端的手机会卡,适当 GPU hack: iphone safari浏览器会出现滚动条,::-webkit-scrollbar {display: none;width:0}无效: .slider_wrap::-w…

朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 (上菜单,下内容,控制两者的margin实现). JS代码(jquery.showup.js): /** * @Creator: Nelson Kuang/Fast Mover * @showup 翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页 * @License:Th…

jquery 触屏滑动+定时滚动

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="applicable-device…

zepto.js swipe实现触屏tab菜单

今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能.前几天,有朋友告诉我百度基于zepto.js做了一个webapp的UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊... 我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“h…

TouchSlide触屏滑动特效插件的使用

官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.插件开源.体积小.简单实用.功能强大,是你架构移动终端网站的重要选择!ps:如果你SuperSlide的使用者,那么你会发现它是那么熟悉和易用.v1.1 宽度自适应(修复安卓横屏时滑动范围不变的bug) 演示案例:http://www.supersli…

TouchSlide 触屏滑动特效插件

TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是你架构移动终端网站的重要选择! ps:如果你SuperSlide的使用者,那么你会发现它是那么熟悉和易用. TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法…

js移动端触屏事件

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

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发…

JavaScript触屏滑动API介绍

随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为手指在屏幕上滑动处罚的事件,这里制作了一个简单的示例,可以通过这个示例认识touchmove事件. 效果展示 http://hovertree.com/texiao/mobile/12/ 手机或者其他触屏设备扫描二维码体验效果: 本示例弹出的Touch事件请参考:http://hovertree.c…

移动端touch触屏滑动事件、滑动触屏事件监听！

一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规…