20佳惊艳的HTML5应用程序示例分享

20佳惊艳的HTML5应用程序示例分享的相关文章

• 
  html5 canvas 使用示例

  标签：Web开发

  复制代码代码如下: !DOCTYPE HTML html head meta charset="UTF-8" titleHTML5示例/title style type="text/css" #container{border:1px solid #ccc;width:800px;height:600px;position:relative;} canvas{position:absolute;top:0px;left:0px;z-index:1;} /style /head body select id="tools" option value="pen"铅笔/option option value="line"直线/option option value="rect"矩形/optio...[ 查看全文 ]

  cj7182006

  41
• 
  html5弹跳球示例代码

  标签：Web开发

    代码如下： html head meta charset=utf-8 title跳跳球/title script //box var box_x=0; var box_y=0; var box_width=300; var box_height=300; //注意:定位球采用球的中心 var ball_x=10; var ball_y=10; var ball_radius=10; var ball_vx=5; var ball_vy=3; var box_bound_left=box_x+ball_radius; var box_bound_right=box_x+box_width-ball_radius; var box_bound_top=box_...[ 查看全文 ]

  自各的心自各疼

  11
• 
  html5 offlline 缓存使用示例

  标签：Web开发

  如果想使用该api，必须保证服务器端配置相应的mime类型。 拿tomcat为例，在打开Tomcat 6.0\conf\web.xml文件，在文件的最后面添加如下内容 代码如下： mime-mapping extensionmanifest/extension mime-typetext/cache-manifest/mime-type /mime-mapping 尤其注意，extension的value是manifest，所以以后配置缓存文件的后缀必须跟他一样。 使用缓存是必须如下格式 代码如下： !DOCTYPE html ...[ 查看全文 ]

  哪简单的小情歌

  91
• 
  html5 跨文档消息传输示例探讨

  标签：Web开发

  对窗口对象的message事件进行监听 代码如下： window.addEventListener("message", function(event) { // 处理程序代码 }, false); 使用window对象的postMessage()方法向其他窗口发送消息，该方法的定义如下： 代码如下： otherwindow.postMessage(message, targetOrigin); 该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何JavaScript对象（通过JSON转换对象为文本）；第二个...[ 查看全文 ]

  q2521500356

  71
• 
  使用HTML5拍照示例代码

  标签：Web开发

  演示地址： HTML5拍照演示 首先，我们看看HTML代码结构，当然，这部分的DOM内容应该是在用户允许使用其摄像头事件出发后，动态加载生成的。 注意： 我们采用的是 640X480的分辨率，如果采用JS动态生成，那么您是可以灵活控制分辨率的。 代码如下： !-- 声明： 此div应该在允许使用webcam，网络摄像头之后动态生成 宽高： 640 *480,当然，可以动态控制啦! -- !-- Ideally these elements aren't crea...[ 查看全文 ]

  cuiyan1109

  421
• 
  html5指南-6.如何创建离线web应用程序实现离线访问

  标签：Web开发

  今天我们的内容是关于如何创建离线web应用，他的好处是可以让浏览器下载我们指定的web资源，这样用户在离线状态下也能正常使用我们的站点。 1.定义Manifest 我们使用manifest列举出需要离线时访问的资源，他本身是一个文本类型的文件，第一行经常是CACHE MANIFEST，然后列举我们需要的资源，每行一个。文件没有固定的命名规则，后缀名也没有要求，唯一的要求就是需要把后缀名在服务器端以text/cache-mani...[ 查看全文 ]

  zyz真爱你

  91
• 
  HTML5标签与HTML4标签的区别示例介绍

  标签：Web开发

  （1）概念的变化： HTML5专注内容与结构，而不专注的表现 header hgroup导航相关数据/hgroup /header nav菜单/nav article h1标题:HTML5专题视频教程/h1 （2）声明与标签： HTML5在更多的声明和标签上面做了简化，也对兼容做了详细的规定，废除了部分元素，增加了部分元素。 HTML5标签语法介绍及新增标记 1、语法标签： （1） 不允许写的结束符的标签：area、basebr、col、command、Embed、h...[ 查看全文 ]

  Quuu430

  11
• 
  HTML5 Canvas鼠标与键盘事件demo示例

  标签：Web开发

  演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成： 代码如下： // mouse event canvas.addEventListener("mousedown",doMouseDown,false); canva...[ 查看全文 ]

  第十三滴菜籽油

  461
• 
  Html5实现iPhone开机界面示例代码

  标签：Web开发

  今天我突发其想，想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。 当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。 完工后的图片：   担心图片是被我PS后的同学可以直接进入下面的地址测试： http://www.cnblogs.com/yorhom/articles/3163078.html 由于lufylegend封装得的确不错，本次开发还是用该引擎做的。代码不多，感兴趣的朋...[ 查看全文 ]

  371599645

  191
• 
  程序设计HTML5 Canvas API

  标签：Web开发

  代码如下： script type="text/javascript" try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("support").innerHTML = e.message; } /script 加入Canvas canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/ 代码如下： ...[ 查看全文 ]

  123yanzipen123

  61
• 
  html5 桌面提醒：Notifycations应用介绍

  标签：Web开发

  HTML5中的桌面提醒（web notifications）可以在当前页面窗口弹出一个消息框，这个消息框是跨 Tab 窗口的，这在用户打开多个 tab 浏览网页时，提醒比较方便，容易让用户看到。目前只要是 webkit 内核支持该功能。 该功能在 chrome 下需要以 http 方式打开网页才能启用。 桌面提醒功能由 window.webkitNotifications 对象实现（webkit内核）。 window.webkitNotifications 对象没有属性，有四个方法： 1.re...[ 查看全文 ]

  小羽小西

  161
• 
  HTML5的表单(绝对特别强大的功能)使用示例

  标签：Web开发

  1、邮箱的自动验证 只需要type=email 2、日期的验证（年月日）：type="date" 3、时间的验证（格式：00:00）：type="time" 4、数字的验证 (可以向上加 向下减)type="number" 5、月份（--年--月）type="month" 6、周（--年--周）type="week" 7、range(范围0-100) type="range" 8、search type="search" 9、颜色的颜色大全：type...[ 查看全文 ]

  厌倦只在一瞬间

  101
• 
  Html5游戏开发之乒乓Ping Pong游戏示例(一)

  标签：Web开发

  在这一章节我们将： 准备开发工具 建立我们的第一个游戏-Ping Pong 学习使用Jquery JavaScript库做基本定位 获取键盘输入 Creating the Ping Pong game with scoring 下面的游戏截图就是我们本章学习后的成果。它是一款乒乓游戏，有2个玩家使用一个键盘比赛。 那么，现在就让我们开始创建我们的游戏。 准备开发环境 HTML5游戏开发和网站开发是相似。我们需要一个web浏览器和一个优秀的文本编辑...[ 查看全文 ]

  G高大帅

  261
• 
  HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)

  标签：Web开发

  HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y) 图示如下：   任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。 代码演示： 代码如下： // translate is move the startpoint to centera and back to top left ...[ 查看全文 ]

  东少丶天平

  761
• 
  html5与css3小应用

  标签：Web开发

  html5与css3小应用，感兴趣的话，可以点击下载，适合ie9+，ff，chrome等浏览器   [ 查看全文 ]

  娜写妗生

  31
• 
  浅谈HTML5游戏前端开发秘籍分享

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  QQ空间Android版4.2和4.5上线的玩吧游戏空间疯狂套牛是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的HTML5游戏。   一、自适应 Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来...[ 查看全文 ]

  abc北京宠物

  21
• 
  Html5游戏开发之乒乓Ping Pong游戏示例(三)

  标签：Web开发

  jQuery 介绍 用jQuery操作游戏元素 我们已经用jQuery初始化了球拍。现在我们做一个如何使用jQuery安置游戏元素的实验。 动起来-使用jQuery修改元素的位置 让我们用网格背景来检查我们游戏的元素位置 ： 1、我们继续使用PingPong示例。 2、从这里下载我们需要的网格背景图片。 3、在练习目录下创建一个名字叫images的文件夹。 4、将下载的图片放置到jimages文件夹里。这个图片将有助于我们以后...[ 查看全文 ]

  jianquv3bko

  61
• 
  Html5游戏开发之乒乓Ping Pong游戏示例(二)

  标签：Web开发

  Headerandfooter Html5引进了许多新的特性和改进，其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个，header和footer。header标签定义文档的页眉（介绍信息），footer标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。 [语义标签在HTML中提供有意义的信息，而不只是定义视觉效果。] 放置JavaScript代码的最佳位置 ...[ 查看全文 ]

  shitouems

  21
• 
  HTML5在a标签内放置块级元素示例代码

  标签：Web开发

  对比起XHTML来说，HTML5通过更简单的元素引起了一系列的思考，坦诚地讲,这真的是急需的简化。这些简化之一就是能够通过a标签包装像div,h标签(h1...h6),和段落标记P 这些块级元素。你没看错:用一个A标签包裹块级元素(译者注: 在HTML5以前，a标签属于行内元素，而div,h1,p 等为块级元素，如果强行包裹，可能会被强行截断为多个a标签。当然，都是浏览器的事啦。). 示例代码： 代码如下： body a href="/ab...[ 查看全文 ]

  亚运村的胖子

  191
• 
  Delphi应用程序的应用（一）

  标签：Delphi

    11.1 Help文件的建立 Help文件是 Micosoft Windows3.0 以上的版本提供的超文本帮助文件。利用这种超文本 , 用户可非常方便地使用帮助文件系统。帮助文件是以主题为主线进行编写的，一个主题可以跳转至相关的主题，也可按关键字进行主题查询。帮助文件与软件开发工具相结合，可实现应用程序的 ' 上下文敏感 ' ，而且帮助系统自动装入。“上下文敏感”是指根据程序当前执行代码来显示 Help ...[ 查看全文 ]

  不爱扯蛋

  161