国外开发的HTML 5精彩应用

在HTML 5未 成熟应用的时候,流媒体播放等一些精彩应用必须借助第三方软件才可以实现,比如Flash等。但是现在HTML 5已经将其超过,它不但可以播放视频和音频,而且还可以开发出各种网络在线应用程序,如标识的地理位置、离线存储、拖放、图片处理等。在这篇文章中,我们 来看看最近国外的一些使用HTML 5开发的网站。请注意,您将需要一个支持HTML 5的浏览器。

一、处理图片

国外开发的HTML 5精彩应用 三联

网址:http://radikalfx.com/files/collage/demo.html

本网站使用了HTML 5的Canvas元素来创建一个图层列表,通过从图片库选择图片添加后,会新建一个新的图层,每一层都可以通过操纵将图片进行:移动、缩放、旋转、改变图层上下级、删除层、改变透明度、改变混合模式、启用或禁用的图片阴影。

二、图片编辑

图片编辑

网址:http://www.aviary.com/html5editor

百鸟居的HTML 5的图片编辑器十分的非常方便快捷,可以说它将在线图片编辑革新化。 通过简单的上传和点击,任何人都可以通过互联网编辑精美的图片,或者通过多层操作来执行简单的图层合并、单层编辑等功能。

三、待办事项

待办事项

网址:http://10k.aneventapart.com/Uploads/58/

5List是一个使用HTML 5、CSS 3和JavaScript编写的记事本,利用了HTML 5的功能,包括localStorage,它具有客户端数据库存储功能。通过5List,可将用户提交的待办数据保存到用户本地机器上。

四、拖拽图片上传

拖拽图片上传

网址:http://demos.hacks.mozilla.org/openweb/imageUploader/

这个使用HTML 5开发的图片上传功能,在Mozilla的Firefox 3.6中测试通过,发现Firefox 3.6支持HTML 5的部分功能。 它支持将图片直接拖拽到浏览器进行上传。

五、谷歌吃豆子

谷歌吃豆子

网址:http://html5games.net/game/google-pacman/

这是谷哥为纪念吃豆子游戏30周年,将网站首页换成此游戏LOGO而设计的!据说这个游戏255关,包括最后一关!

六、表单

表单

网址:http://thinkvitamin.com/code/fun-with-html5-forms/

一个非常有用的表单示例代码,使用HTML 5开发,包含了常见的表单操作,它能将需要的表单字段进行验证、字段占位符、日期选择器和电子邮件验证等,可用于网页和手机网页等具体领域。

七、图表

图表

网址:http://www.humblesoftware.com/finance/index

HumbleFinance是使用HTML 5开发的数据可视化工具,如使用HTML 5进行交互式数据图形演示,它可用于显示任何两个2-D的数据集。

八、在线幻灯片制作

在线幻灯片制作

网址:http://10k.aneventapart.com/Uploads/143/

此幻灯片展示了HTML 5的localStorage和ContentEditable功能,应用十分丰富。简单的操作界面,利用CSS 3功能,同时又保持较小的文件大小。它支持将内容“自动保存”到本地(通过localStorage),拥有增加、减少和主题更换操作。

九、在线绘图

在线绘图

网址:http://muro.deviantart.com/

MURO是一个纯HTML 5开发的在线绘图工具,它有两种模式:基本和专业,它们都免费使用。 MURO支持效果有滤镜、锐化工具和画笔,所有的操作在一个直观和简单的界面里进行,使用相当容易。

十、地理定位

地理定位

网址:http://studio.html5rocks.com/#Geolocation

这个Web应用程序会自动检测您所在的位置,然后使用谷歌地图返回附近的就业信息。 不过需要注意的是,它要求分享您浏览器所处的地址信息。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Js正则表达式过滤特殊字符、表情的实例代码: let ret = "12312ffds#¥@¥#%^***(()))*)).`@%@¥@¥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~!@#¥……*()——|{}【】‘;:”“'。,、?]
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用
HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这
近日,微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号,项目名称为 ChakraCore,遵循MIT许可协议。 ...,HTML5中国,中国最大的HTML5中文门户。
这篇文章报道的不是“新闻”,因为W3C早已开始着手CSS变量方面的工作。至于Google,则要追溯到11月初,当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...,HTML5中国,中国最大的HTML5中文门户。