web移动端触摸滑动事件

web移动端触摸事件的范例~~~

注意:1.如果不是内联元素,获取style的属性值前需先赋值~不然为Null.

2.亲测andriod 手机 MX4内置浏览器运行妥妥的~~但是微信浏览器并不支持~原因未找到。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
 5     <title>web移动端触摸滑动事件</title>
 6     <meta name="description" content="web移动端触摸滑动事件"/>
 7     <meta name="viewport" content="user-scalable=no">
 8 </head>
 9 <body>
10 <div style="position:relative;left:10px;top:10px;height: 100px;width: 200px;background: blue;" id="slider"></div>
11 <script>
12     var slider = {
13         //判断设备是否支持touch事件
14         touch: (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch,
15         slider: document.getElementById(‘slider‘),
16         //事件
17         events: {
18             slider: this.slider,     //this为slider对象
19             handleEvent: function (event) {
20                 var self = this;     //this指events对象
21                 if (event.type == ‘touchstart‘) {
22                     self.start(event);
23                 } else if (event.type == ‘touchmove‘) {
24                     self.move(event);
25                 } else if (event.type == ‘touchend‘) {
26                     self.end(event);
27                 }
28             },
29             //touchstart
30             start: function (event) {
31                 event.preventDefault();                 //阻止浏览器的默认事件
32                 var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch,取第一个touch
33                 startPos = {x: touch.clientX, y: touch.clientY};    //取第一个touch的坐标值
34                 sliderX = parseInt(this.slider.style.left);            //获取触摸时滑动块的初始位置
35                 sliderY = parseInt(this.slider.style.top);
36                 this.slider.addEventListener(‘touchmove‘, this, false);
37                 this.slider.addEventListener(‘touchend‘, this, false);
38             },
39             //touchmove
40             move: function (event) {
41                 //当屏幕有多个touch或者页面被缩放过,就不执行move操作
42                 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
43                 var touch = event.targetTouches[0];
44                 endPos = {x: touch.clientX - startPos.x, y: touch.clientY - startPos.y};                 //获取所移动的距离
45                 event.preventDefault();      //阻止触摸事件的默认行为,即阻止滚屏
46                 this.slider.style.left = (sliderX + endPos.x ) + ‘px‘;
47                 this.slider.style.top = (sliderY + endPos.y) + ‘px‘;
48
49             },
50             //滑动释放
51             end: function (event) {
52                 //解绑事件
53                 this.slider.removeEventListener(‘touchmove‘, this, false);
54                 this.slider.removeEventListener(‘touchend‘, this, false);
55             }
56         },
57
58         //初始化
59         init: function () {
60             var self = this;     //this指slider对象
61             if (!!self.touch) self.slider.addEventListener(‘touchstart‘, self.events, false);    //addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性
62         }
63     };
64     slider.init();
65 </script>
66 </body>
67 </html>
时间: 2024-10-11 15:18:26

web移动端触摸滑动事件的相关文章

Html5 移动端 触摸滑动事件

以下代码经过测试  没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chr

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加

swipe JS – 移动WEB页面内容触摸滑动类库

swipe.js文档及用法 今天带来一个轻量级js触摸滑动类库-swipe JS,这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放.等比例缩放等等实用性的功能: 一.用法 Swipe只需添加很简单的一段代码即可,如下 <div id='slider' class='swipe'> <div class='swipe-wrap'> <div class='wrap'>&l

移动端触摸相关事件touch、tap、swipe

一.事件定义及分类 1. click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件,有touchstart touchmove touchend touchcancel 四种之分 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时,会触发 touchend:当手指离开屏幕时,会触发 touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了

&#31227;&#21160;&#31471;&#19978;&#19979;&#28369;&#21160;&#20107;&#20214;&#20043;--&#22353;&#29241;&#30340;touch.js

转:http://blog.csdn.net/minidrupal/article/details/39611605?utm_source=tuicool&utm_medium=referral 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩。 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画。 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动

移动端上下滑动事件之--坑爹的touch.js

原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h

手机网站的触摸滑动事件

关于触摸滑动的网上有比较多的插件,我找了一个比较好用的插件,给大家分享下. http://stephband.info/jquery.event.swipe/ 通过引入两个文件就可以在手机web页面上实现触摸滑动操作了(文件在github里面,jquery.event.move.js和jQuery.event.swipe.js) 用法: var slides = jQuery('.slides'), i = 0; slides .on('swipeleft', function(e) { sli

移动端触摸滑动插件swipe.js

插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动前端开发中. 使用方法 下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可. <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div>

Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等

jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipad,iphone和 Android上并不能正常工作.因为jQuery UI监听的是mouseover,mousemove和mouseout事件,不是触摸事件,touchstart,touchmove和 touched. 为了解决这个问题,这里我们介绍jQuery UI Touch Punch类库,它