<!DOCTYPE HTML> <html> <head> <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />     <title>后盾网视频教程之滑动轮播效果</title>  </head> <style type="text/css">  *{   margin: 0px;   padding: 0px;  }  #hd_w{   width: 400px;   height: 300px;   position: relative;   border: 4px solid yellow;   overflow: hidden;  }  #hd_d{   width: 2800px;   height: 300px;   position: absolute;

}  #hd_d img{   width: 400px;   height: 300px;   float: left;  } </style>

<script type="text/javascript">  window.onload = function(){   var hd_w = document.getElementById('hd_w');   var hd_d = document.getElementById('hd_d');

var a=0;

var time =setInterval(run,3000);  function run(){    a++;    if (a==6) {     a=1;    };    var l = -400*a;    hd_d.style.left = l+'px';

}

hd_w.addEventListener('touchstart',start,false);  var dl;  var startX;  var moveX;  var newX;  function start(e){   var e = e||window.event;   dl = parseInt(hd_d.style.left);   startX = e.changedTouches[0].clientX;   clearInterval(time);

}  hd_w.addEventListener('touchmove',move,false);

function move(c){   var c = c||window.event;   moveX = c.changedTouches[0].clientX;   newX = moveX-startX;   var l = newX+dl;   hd_d.style.left = l+'px';

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
2014-02-08      2个评论    来源：梦龙小站  
收藏    我要投稿

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。

一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。

在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。

touches：表示当前跟踪的触摸操作的touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。

JavaScript代码

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
function load (){
 
    document.addEventListener('touchstart',touch,false);
    document.addEventListener('touchmove',touch,false);
    document.addEventListener('touchend',touch,false);
     
    function touch (event){
        var event = event || window.event;
         
        var oInp = document.getElementById("inp");
 
        switch(event.type){
            case "touchstart":
                oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
            case "touchend":
                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
                break;
            case "touchmove":
                event.preventDefault();
                oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
        }
         
    }
}
window.addEventListener('load',load,false);

HTML代码

​

1 <div id="inp"></div>

上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到div标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。

这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)就为大家介绍到这里了，今天主要为大家介绍了些浏览器兼容支持的情况还不错的触摸事件。日后若有兼容不错的事件，再继续介绍。更多有关HTML5实战与剖析的相关知识，敬请关注梦龙小站的相关更新。​

}  hd_w.addEventListener('touchend',end,false);

function end(){   time = setInterval(run,3000);   var k;   if (newX<0) {    a=a+1;    k = -400*a;    hd_d.style.left = k+'px';    newX=0;    if (a==6) {     a=1;     k = -400*a;     hd_d.style.left = k +'px';    };

};   if (newX>0) {    a=a-1;    k = -400*a;    hd_d.style.left = k+'px';    newX =0;    if (a==0) {     a=5;     k = -400*a;     hd_d.style.left = k+'px';    };

};

}

} </script>

<body> <h1>请在pc浏览器响应模式下或手机端浏览器查看效果</h1>

<div id="hd_w">  <div id="hd_d" style="lfet:-400px;top:0px;">   <img src="img/5.jpg" alt="">   <img src="img/1.jpg" alt="">   <img src="img/2.jpg" alt="">   <img src="img/3.jpg" alt="">   <img src="img/4.jpg" alt="">   <img src="img/5.jpg" alt="">   <img src="img/1.jpg" alt="">  </div> </div> <!-- touchstart 触屏事件开始时触发这个事件 touchmove 触屏移动时触发这个事件 touchend 触屏事件结束时触发这个事件 --> </body> </html>

html .css 实现图片滑动和自动播放特效移动端 HTML 5中添加了以touch 开头的事件的更多相关文章

  1. 仿微博视频边下边播之滑动TableView自动播放-b

    Tips:这次的内容分为两篇文章讲述01.[iOS]仿微博视频边下边播之封装播放器 讲述如何封装一个实现了边下边播并且缓存的视频播放器.02.[iOS]仿微博视频边下边播之滑动TableView自动播 ...

  2. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  3. 解决audio 在部分移动端浏览器不能自动播放（目前包括ios、微博）

    问题描述:项目需要在页面加载完成后自动播放音乐,但在ios中却无法自动播放,需要用户主动触发 解决办法: $('html').one('touchstart',function(){ document ...

  4. 【转】一种解决h5页面背景音乐不能自动播放的方案

    原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...

  5. 一种解决h5页面背景音乐不能自动播放的方案

    场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeRea ...

  6. 关于h5中背景音乐的自动播放

    音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...

  7. html5添加视频为背景自动播放

    客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码:: 于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop” 然而通过地址栏进去的 ...

  8. ChromiumWebBrowser flash不能自动播放问题解决方案

    前言:WPF项目 引用 CefSharp.Wpf 79.1.360,新版本的Cef默认flash不能自动播放 步骤一:提高pepflashplayer版本号 在CefSettings中设置版本号参数: ...

  9. 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Angularjs通过$http与服务器通信

    angular是一个前端框架,实现了可交互式的页面,但是对于一个web应用,页面上进行展示的数据从哪里来,肯定需要服务端进行支持,那么angular是如何同服务端进行交互的呢? $http angul ...

  2. Linux环境快速部署Zookeeper集群

    一.部署前准备: 1.下载ZooKeeper的安装包: http://zookeeper.apache.org/releases.html 我下载的版本是zookeeper-3.4.9. 2.将下载的 ...

  3. sql Cursor的用法

    table1结构如下 id int name ) declare @id int ) declare cursor1 cursor for --定义游标cursor1 select * from ta ...

  4. trove显示更多flavor信息

    https://review.openstack.org/#/c/352786/12 这是我目前提交的commit,如果想添加新的flavor信息可以参考这个,有几个需要注意的点是在跑py27的时候, ...

  5. C#扩充类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 关于64位win7环境下VS连接oracle数据库的问题

    本机环境:64位win7,安装了64位的oracle桌面类 服务器环境:64位windows server 2008,64位oracle服务器端 问题:本机用sql developer连数据库没有问题 ...

  7. samba 开启

    1.查询samba服务安装好没 2.安装samba服务 3.增加以下几个条目 4.useradd smbuser 5.在重启中注意的问题 5.详细请查看 http://jingyan.baidu.co ...

  8. Python学习笔记——进阶篇【第九周】———线程、进程、协程篇（队列Queue和生产者消费者模型）

    Python之路,进程.线程.协程篇 本节内容 进程.与线程区别 cpu运行原理 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Ev ...

  9. Python学习笔记——基础篇【第七周】———进程、线程、协程篇（socket基础）

    http://www.cnblogs.com/wupeiqi/articles/5040823.htmlhttp://i.cnblogs.com/EditPosts.aspx?postid=55437 ...

  10. Recursive - leetcode [递归]

    经验tips: Recursion is the best friend of tree-related problems. 一是只要遇到字符串的子序列或配准问题首先考虑动态规划DP,二是只要遇到需要 ...