html5页面左右滑动是怎么实现的？

左右滑动是由触摸事件定义的，触摸事件(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代码：

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代码：

<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

1. 谁会用ih5 麻烦指导我一下怎么把PPT放到朋友圈或者发给朋友,谢谢

你好！希望能帮到你。

第1步，将电脑上做好的PPT保存为图片格式。

第2步，在iH5新建案例。

第3步，有两个方法：

(1)进入iH5的工具页面后，鼠标右击对象树面板上的“舞台”，从d出的菜单中选择“导入PPT”。回到“我的电脑”，全选你的PPT图片，拖拽到中间的舞台区域中来，即可完成PPT的上传。

(2)点击工具栏的“幻灯片”，上传zip/格式的图片。

第4步，设置页面为左右滑动。

在对象树面板中选中舞台，在舞台的属性面板中找到“滑动页面”属性，设为“左右（跟随）”，表示手指左右滑动可以翻页。

第5步，设定微信分享标题和截图，发布并分享。

点击菜单栏中的“发布”，即可d出“发布作品”的对话框，可以设定微信标题、内容简介等。同时，上传一张截图，这张截图就是你在微信里分享给小伙伴时链接左侧会出现的小图哦！

发布成功后，页面会d出提醒框，并提供二维码，只需用微信扫一扫二维码，即可在微信中打开，并发送给小伙伴，或是分享到朋友圈。

2. ih5怎么导入PPT

步骤：Step 1. 把电脑上做好的PPT保存为图片的格式。

注意：导出时请选择“保存每一张幻灯片”，页面设置建议选择16:9的横宽比例，以适应手机上查看。Step 2. 使用一个免费的在线工具 —— 互动大师来把PPT转为手机上的页面。

在浏览器里进入VXPLO互动大师官网，注册一个用户名，然后在“我的作品”页面下选择创建一个作品，选择手机案例，点击下一步。Step 3. 一键上传PPT看到中间空白的区域，这是“舞台”，鼠标右键点击舞台，然后从d出的菜单中选择“上传PPT”。

回到“我的电脑”，全选PPT图片，拖拽到中间的舞台区域中来。Step 4. 设定页面为左右滑动刚才上传至舞台的PPT图片就自动变成了一页页的图片。

然后在对象树面板中选中舞台，在舞台的属性面板中找到“滑动页面”属性，设为“左右”（表示手指左右滑动可以翻页）。Step 5. 设定微信分享标题和截图点击编辑器最上角的“i”标记，输入PPT的名称，上传一张截图，这张截图就是在微信里分享给小伙伴时链接左侧会出现的截图。

Step 6. 保存和分享点击编辑器上方的保存，退出编辑器。再回到“我的作品”页面，点击作品封面上的分享按钮，微信扫一扫二维码，直接在微信中打开，就可以发送给小伙伴们，或是分享到朋友圈啦。

PPT制作完成后，使用iPhone以及具有横屏功能的Android手机，可以直接横置屏幕，放大查看；对于不支持横屏功能的手机，可以竖屏查看。

3. 如何在PPT与Html5之间轻松转换

由于Flash被苹果拒之门外，很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择。

今天Google发布的一个新工具让天平再次偏向HTML5这边，它就是Swiffy。 Swiffy可以把Flash文件转换成HTML5标准。

该项目源于Google移动广告团队，开发动机就是有些设备不支持Adobe的格式，因此无法显示Flas *** 。有了这个工具，你只需上传.swf文件，然后就可以将其转化为HTML5标准，显示效果和Flash一样（文件格式为JSON）。

Google称这个转换工具还不支持完全基于Flash的游戏，但是支持向量图形、嵌入式字体、图片、动画等。下面就是一个演示效果截图「上面为Flas *** ，下面为经Swiffy转化后的动画」，你可以点击这个链接亲自体验。

Swiffy目前只是一个实验项目，但对开发者来说非常有用。与此同时，反Flash的苹果肯定在偷着乐吧。

除了这款Flash转化工具之外，Adobe今年3月份自己也推出一款转化工具Wallaby。Flash 大红大紫的日子已经过去了，浏览器厂商们齐心协力整出了 HTML5 标准，抢 Flash 的饭碗；乔教主坚决不让 iPhone 支持 Flash,Adobe 心都挖凉了。

现在 Google 也推出了 Swiffy，免费把 SWF 格式转换为 HTML5 代码， *** 裸的挖墙脚啊。Google Swiffy 目标用户是网络开发人员，它不能转换 Flash 视频，但对大多数 Action Script 交互型 Flash 支持良好。

用户只需将 SWF 文件上传，转换非常快。输出的 HTML 代码会用到一些 SVG 特性，目前只有 webkit 内核浏览器支持；这意味着输出的代码仅仅在 Safari/Chrome 上可用，自然，iOS 自带浏览器也会支持。

可以放到移动端的html5动画切换效果

默认也可以自动切换

支持鼠标点击拖动、滑动

将head中的样式引入到你的样式表中

将body中需要的代码部分拷贝过去即可

---