1创建两个html文件，一个test一个test22打开test页面，在里面创建一个div，并给其添加onmousedown与move方法3打开后我们发现是一个棕绿的页面4定义两个变量，startx为鼠标按下的坐标，endx为鼠标移动的坐标。

代码如下lt！DOCTYPE html lthtml ltbody ltcanvas id=quotmyCanvasquot width=quot700quot height=quot550quot style=quotborder1px solid #d3d3d3quot Your browser does not support the HTML5 canvas tagltcanvas ltscript var。

4还有一个是矢量图方式，svg代码，用代码控制svg元素也可以完成很好的动画效果，像d3js这样的图表引擎便使用svg进行绘制。

在 HTML5 中，任何元素都能可以进行拖放，所以接下来在文章中将通过实例详细告诉大家如何实现拖动效果拖放效果所需的知识点draggable 规定元素是否可拖动，一般情况下链接和图片默认是可拖动的true规定元素是可拖动的。

你可以看到代码如下functionvar currentValue = $#39#currentValue#39$quot#sliderquotslidermax 500，min 0，slide functionevent， ui currentValuehtmluivalue代码非常简单使用slider。

H5单页面手势滑屏切换是采用HTML5 触摸事件Touch 和 CSS3动画Transform，Transition来实现的1实现原理假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度width 设置为500%，然后将5个页面。

动画效果，图片从右侧飞入 quot#div_pic ul liquoteqindexanimateleftquot0quot，500 * 下面是可配置轮播动画代码 fnslide=functionoptions var defaults= affect1， 1上下滚动。

lt！DOCTYPE htmllthtml lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot id=quotviewportquot content=quotwidth=devicewidth， initialscale=1quot lttitlehtml5向左滑动删除特效lttitle ltstyle * padding。

单用css应该不太容易，用js吧 ltscript windowonload = function 因为是放在最前面，元素没有加载完成所以要加上windowonload表示加载完成 windowbtn = documentgetElementById#39menubtn#39通过ID来。

1 手写代码这是最直接也最基础的方法开发者使用文本编辑器如Notepad++，Sublime Text，Visual Studio Code等直接编写HTML5代码这种方法要求开发者对HTML5的语法和结构有深入的理解虽然这种方法初期可能比较困难。

使用HTML5画布canvas能够快速实现简单的动画效果，基本原理如下每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用contextclearRect0， 0， x， y方法来刷新需要绘制的图形 首先是绘制图形的方法，如下fu。

利用HTML5可以绘制很多静态的图像，也可以制作一些炫酷的动画，本文分享了8个利用HTML5和CSS3实现的动画演示，同时也分享了源代码供大家下载参考1HTML5 3D点阵列波浪翻滚动画这个HTML5 Canvas动画非常壮观，给人一种破浪。

你要制作微杂志吧用名编辑电子杂志大师，好多企业用使用名编辑把PDF图片直接转换成HTML5的微信杂志，还可以从0开始一页页的编辑制作微信杂志，能做出仿真翻页左右滑动翻页上下滑动翻页效果。

普通banner或信息列表可以用IScroll上下左右均可滑动 页面滑动切换的话建议使用jquery mobile，实现如下事件，进行changepage swipe划动一秒内水平拖拽大于30PX，同时纵向拖曳小？0px的事件发生时触发 swipeleft左划。

超酷震撼 HTML5CSS3动画应用及源码HTML5可以制作非常华丽的动画效果，这点通过之前的分享学习我们已经有深刻的了解了，今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码，真的非常不错 1纯CSS3创意。

HTML5是无法做这个事情的准确点说应该是用CSS的响应式布局这个东西你可以去看一下bootstrap，这个前端框架就是大量利用了这个技术。