Html5 文章
关注
分享
扫一扫
文章平均质量分 75
佐笾已逝
wufenglong
展开
-
iframe 高度自适应
转自：http://apps.hi.baidu.com/share/detail/20320137 高度自适应： 好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家...原创 2011-11-03 17:07:08 · 459 阅读 · 0 评论 -
html5 实现动画（三）
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器帧数：速度：比例： //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } ...原创 2011-03-23 12:04:55 · 91 阅读 · 0 评论 -
html5 图片绘画-美女
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 //美女图的 Base64 编码IMG_SRC='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXwAA...原创 2011-03-23 12:08:14 · 57306 阅读 · 0 评论 -
html5 图片绘画-贴图
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 //美女图的缩小版本 IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAX...原创 2011-03-23 12:10:09 · 227 阅读 · 0 评论 -
html5 本地存储
HTML5本地存储初探(二)完成了UI，我们就需要对数据进行处理了。在开始“数据”的本地存储之前，我们先来了解一下client-side database storage API:the client-side database storage API allows web applications to store structured data locally using a medium m...原创 2011-03-23 13:31:52 · 81 阅读 · 0 评论 -
HTML5 缓存: cache manifes 初解
一、什么是 Cache Manifest话说，作为一个 web 开发相关的人员，都不会少听到、看到 cache 这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个 .manifest 文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个 .manifest 文件，具体的可以 Google 一下，而简单的我帮你整理一下现在可能会希望了解的东西：MIME TYPE：text/...原创 2011-03-23 13:38:13 · 209 阅读 · 0 评论 -
浏览器自适应设备宽度，并且禁止缩放
[img]http://dl.iteye.com/upload/attachment/444408/af71b6a2-0e49-3a4b-9d31-7059b7206a17.jpg[/img][img]http://dl.iteye.com/upload/attachment/444410/94f72f05-2660-3a28-aab6-e0abf8429d08.jpg...原创 2011-03-23 13:43:06 · 117 阅读 · 0 评论 -
使用 Http Cache 缓存和 Html5 Local Storage 本地存储提升 Web 服务响应速度
响应速度无疑是评价网站服务是否优秀的一个重要条件。但有时候网站的服务器端的确需要进行大量计算，导致客户端发送请求后过了很久响应返回，对于用户很可能就是看到一个空白的页面在加载，这样用户体验就太差了。目前已经有很多方法来提升 Web 服务的响应速度。这里我们只讨论从客户端缓存入手，使用 Http Cache 缓存和 Html5 Local Storage 本地存储来提升 Web 服务响应速度。Dem...原创 2011-03-23 13:52:58 · 153 阅读 · 0 评论 -
HTML 5视频标签全属性详解
当今，在网页上嵌入视频且所有用户不管使用任何浏览器，或者操作系统都能看到的唯一可靠方法是使用Flash。这需要Adobe Flash插件，并且结合<object>和<embed>标签。但HTML 5的出现改变了这一事实，其中视频标签<Video>的出现无疑是HTML 5的一大亮点。（相关文章推荐：使用HTML 5视频标签注意事项）51CTO推荐专：HTML 5 ...原创 2011-03-24 15:58:41 · 336 阅读 · 0 评论 -
html5 实现动画（二）
你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } //====================...原创 2011-03-23 12:03:18 · 101 阅读 · 0 评论 -
html5 实现动画（一）
你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器帧数：每次移动距离： //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } //======...原创 2011-03-23 12:01:38 · 119 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(三)
这一回我们让熊动起来~预期达到效果：http://www.html5china.com/html5games/mogu/index2.html一、先定义全局变量JavaScript Code复制内容到剪贴板1. var bearEyesClosedImg = new Image();//闭着眼睛的熊熊 2. var horizontalSpeed = 2;//水平速...原创 2011-03-17 17:23:34 · 120 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(四)
第四回主要讲熊移动碰到边界时的反弹处理预期达到效果：http://www.html5china.com/html5games/mogu/index3.html 一、写一个碰撞处理函数JavaScript Code复制内容到剪贴板1. function HasAnimalHitEdge() 2. { 3. //熊碰到右边边界 4. if(a...原创 2011-03-17 17:25:10 · 101 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(五)
熊碰撞蘑菇处理第五回主要讲熊碰到蘑菇之后向上反弹的效果预期达到的效果：http://www.html5china.com/html5games/mogu/index4.html一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函数JavaScript Code复制内容到剪贴板1. //方法用途：检测2个物体是否碰撞 2. //参数object1：物体...原创 2011-03-17 17:26:35 · 133 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(六)
预期达到的效果：http://www.html5china.com/html5games/mogu/index5.html由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置一、需要到的全局变量JavaScript Code复制内容到剪贴板1. var flowerImg = new Image();//奖品鲜花 2. var leafImg = new...原创 2011-03-17 17:28:24 · 101 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(七)
第七回主要讲熊撞到奖品之后，奖品消失预期达到的效果：http://www.html5china.com/html5games/mogu/index6.html简单说下原理：给奖品加上一个存是否被撞过的属性hit，默认值为false。当奖品撞到的时候。改变hit的值为true。描绘奖品的时候判断hit值是否有没撞到，被撞到的话就不描绘一、给奖品加hit属性JavaScript...原创 2011-03-17 17:29:40 · 106 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(八)
完善游戏第八回合中主要是完善游戏，给游戏加上开始按钮、生命数、得分预期达到的效果：http://www.html5china.com/html5games/mogu/index7.html一、添加开始按钮A、html代码中加入开始按钮，并定位他于画布的中间XML/HTML Code复制内容到剪贴板1. 开始图片下载地址：http://www.html5china...原创 2011-03-17 17:31:23 · 176 阅读 · 0 评论 -
创建一个HTML5的3D引擎
我们知道三维投影平面上的点映射到一个二维，三维点定义一个对象….不幸的是，计算三维可能会是相当复杂的代码。我们怎样才能简化它？如果我们定义平面旋转角与theta 相关，三维投影计算忽然变得简单！任何在三维平面点可以定义为具有以下两个方程描述沿着一个椭圆的边缘点：x = A * cos(theta)y = B * sin(theta)其中A是椭圆的宽/2，B是椭圆的高/2 下面是平面示意图：这种特...原创 2011-03-23 11:52:25 · 153 阅读 · 0 评论 -
html5 canvas实现旋转的心
3D LOVE in canvascssass.comHTML5 canva function g(e){ return document.getElementById(e); } var theta = -0.4; var eleva = -0.1; var pad ...原创 2011-03-23 11:57:30 · 394 阅读 · 0 评论 -
HTML 5 Web Sockets应用初探(1)
HTML 5之中一个很酷的新特性就是Web Sockets，在本文之前51CTO在《HTML 5 Web Socket：下一次Web通信革命揭幕》一文中已经详细的为大家介绍过HTML 5 Web Sockets为Web通信带来的改变，而本文将介绍通过PHP环境的服务器端运行Web Socket，创建客户端并通过Web Sockets协议发送和接收服务器端信息。什么是Web Sockets？Web ...原创 2011-03-24 16:07:20 · 110 阅读 · 0 评论 -
HTML 5 Web Sockets应用初探(2)
第四步：添加一些CSS 没什么花俏代码，只是处理一下标签的样式。 body { font-family:Arial, Helvetica, sans-serif; } #container{ border:5px solid grey; width:800px; margin:0 auto...原创 2011-03-24 16:08:18 · 98 阅读 · 0 评论 -
编程从来都不是个容易的事儿
本文是从 Programming will never be “easy” 这篇文章翻译而来。网上似乎流行着这样一种说法，认为有些人之所以做不了编程，是因为编程语言不够好。我还看到有一部分人更甚，拐弯抹角的暗示说，编程之所以对大多数人而言很困难，是因为我们把编程语言设计的太难，让人们敬而远之，让我们这部分的人的饭碗更安全。事实上，程序员可并不想让自己的工作变的更困难，他们一直在想办法让工作...原创 2011-03-24 16:44:04 · 75 阅读 · 0 评论 -
Webkit做到了HTML5方式的客户端数据库存储
目前正在规划的HTML5标准中有很多令人兴奋的特性，我们非常愿意将这些特性在Webkit里加以实现。其中有一个特性，我们觉得目前可以带给浏览器足够的惊喜——这甚至还并不是规范，那就是客户端数据库存储。因此最近几周我和andersca还有xenon已经将其实现！客户端数据库存储接口允许网页应用通过SQL——这个很多Web开发者已经熟悉的媒介，存储结构化的本地数据。这些接口是异步的并且使用回调函数来处...原创 2011-03-28 13:02:01 · 142 阅读 · 0 评论 -
WebKit 实现HTML5 搜索输入框
One of the new types of inputs in HTML5 is search.It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do anything speci...原创 2011-03-28 13:40:09 · 105 阅读 · 0 评论 -
Adobe 发布 Flash 转换成 Html5 工具 代号Wallaby(沙袋鼠)
Adobe 今日 发布了Flash 到 HTML5的一键转换工具，方便各开发人员对现有的flash资源复用。提供给那些不支持Flash的设备，比如iOS.该工具代号为 Wallaby(沙袋鼠) 可以到adoeb lab 下载：http://labs.adobe.com/technologies/wallaby/中文版下载地址：http://dl.pconline.com.cn/download/6...原创 2011-03-28 16:04:09 · 416 阅读 · 0 评论 -
HTML5 WebSocket 示例
我们通过一个简单的例子来熟悉 HTML5 WebSocket。该例子服务端从 0 开始每秒递增一个整数并发送给客户端浏览器显示。准备：Jetty 7 ，Java Web 开发环境，Chrome 4+ 服务端 Java 代码：final public class CounterSocketServlet extends WebSocketServlet { @Override pro...原创 2011-03-28 16:56:13 · 93 阅读 · 0 评论 -
Google Font API使用教程
Google在不久前推出了自己的Google Font API服务，下面让我们来看看什么是Google Font API，以及我们如何将它应用到Web设计中。谷歌字体API为何物？大家都经常上网，你们是否有看到过一些网站或博客上使用的非标准字体呢？所谓非标准字体是指除了互联网安全字体，如Arial, Helvetica, Verdana, Georgia, Times New Roman之外的其他...原创 2011-03-28 17:29:06 · 305 阅读 · 0 评论 -
GOOGLE FONT API使用教程
尽管互联网上新的技术和项目层出不穷，但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多，但是大多数电脑中安 装并支持的却是一些非常固定的字体，随着互联网设计的发展，传统字体已经不能满足需求。谷歌字体API的登陆[img]http://dl.iteye.com/upload/attachment/449149/1eb1c895-c18d-376c-...原创 2011-03-28 17:31:41 · 167 阅读 · 0 评论 -
html5 拖拽
HTML5拖拽文件以及显示文件利用支持HTML5（具体是拖拽API和File API）的浏览器拖拽图片/音频文件到浏览器窗口指定区域来看到预览（还未上传），需要了解的知识主要是拖拽API，和通过拖拽事件获得File之后，对File进行相关信息读取。在HTML5出现之前读取文件信息操作往往是通过后台来实现，现在浏览器也具有了这样的能力，就能提供更好的用户体验。需要的知识大概如下：(拖拽事...原创 2011-03-29 12:04:44 · 96 阅读 · 0 评论 -
HTML5 – 新旧语法简介
众所周知，HTML是互联网有史以来最伟大的发明。这种超文本标记语言实际上是现代互联网发展的一个基石，以它为中心出现了一个独特的自给自足的体系。当开发HTML5时，它的设计者们正面对着一些很重要的问题，希望能在HTML5里解决。其中的一个问题是，要创建一个真正简洁明了而且易于扩展的语义。 目前这个问题中棘手的部分是老版本的HTML当时是以功能多样的理念为目标设 – 大量的各种各样的标记，当时...原创 2011-03-24 16:36:14 · 78 阅读 · 0 评论 -
HTML5 – 创建一个Web网页便利贴
当你在看我前面所写的HTML 5例子时，我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API，而是想用例子来告诉开发人员如何真正的以一种实用的和创新的方式实现这些API。在九十年代中期，我曾注册了一个软件专利，它是一个“WEB便利贴”。用最简单的话来描述就是，它能创建一个“黄色的便利贴”，粘在你的网页上，就像现实生活...原创 2011-03-24 16:33:29 · 526 阅读 · 0 评论 -
HTML 5 Web Sockets应用初探(3)
第六步：JavaScript首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持Web Socket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。 $(document).ready(function() { if(!("Web Socket" in window)){ $('#chatLo...原创 2011-03-24 16:09:48 · 105 阅读 · 0 评论 -
HTML 5 Web Sockets应用初探(4)
第八步：关闭Socket关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。 $('#disconnect').click(function(){ socket.close(); }); 完整JavaScript代码 $(document).ready(function() { if(!("Web Socket" in window)...原创 2011-03-24 16:12:12 · 103 阅读 · 0 评论 -
HTML 5 File API应用实例(访问本地)
关于HTML 5，51CTO已陆续报道了几篇关于HTML 5应用技巧方面的文章，比如《探秘HTML 5链接预取功能》、《HTML 5 Web Sockets应用初探》等等，下面我们将介绍一个简单的应用，该应用主要使用了HTML 5中的FileReader方法，FileReader就是HTML 5所提供的File API。51CTO推荐专题： HTML 5 下一代Web开发标准详解...原创 2011-03-24 16:16:13 · 141 阅读 · 0 评论 -
现在如何在你的站点上使用HTML 5(1)
已经有许多文章是关于HTML 5的了，例如“HTML 5时代来临”和“HTML 5会如何改变网络”之类的，但是对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它？好消息是现在已经有不少的HTML 5里的东西可以使用了。51CTO推荐阅读：从零开始构建HTML 5 Web页面但是，开始你就必须要明白一件事情，你需要知道你的受众如何，否则...原创 2011-03-24 16:18:31 · 86 阅读 · 0 评论 -
现在如何在你的站点上使用HTML 5(2)
placehoder这个值可以简单地指定一段文本，你经常在网上看到的效果，没值的时候显示此文本，单击的时候值变成空，离开又恢复成该文本，以前要用到Javascript处理，现在浏览器会为你做这个事情了。 有哪些HTML5特性你马上就可以使用？不是所有的HTML5元素都已经准备好可以使用了，因为种种原因（这些原因是没有一个缩写为 IE 的），浏览器支持马上就要来了，...原创 2011-03-24 16:19:22 · 81 阅读 · 0 评论 -
现在如何在你的站点上使用HTML 5(3)
所有这些标签都没有跨浏览器，跨平台实现支持，不过当那天到来的时候，你一定会很向往使用这些标签的。打印式布局，另一个CSS3的特性，全面实施尚需好几年的时间。给设计师们提供了多列布局的特性。目前只能在Firefox和Safari的测试用例里实现。-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -w...原创 2011-03-24 16:20:41 · 87 阅读 · 0 评论 -
为网站提速 探秘HTML 5链接预取功能
HTML 5的链接预取功能(link prefetching)是一个埋在沙里的宝石，至今还很少人知道它的价值。你可能已经知道了那古老而又闻名的图片预加载功能，链接预取功能就是将此概念由图片扩展到了网页内容（不需要任何AJAX代码）。51CTO推荐专题： HTML 5 下一代Web开发标准详解它是这样工作的，在页面上添加一个像这样的链接： 这样，当你的机器空闲时，浏...原创 2011-03-24 16:22:20 · 205 阅读 · 0 评论 -
HTML5 – 拖拽功能
为了演示拖拽用例，我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源，往区域里添加资源，删除没有用的资源。出于教学的目的，我尽量使这个例子简单，但可以看到，依据这些基本的做法，你可以开发出一个全功能的网络管理工具。实现拖拽功能的关键方法非常的简单，就像下面写的这样：function dragIt(target, e) { e....原创 2011-03-24 16:29:21 · 92 阅读 · 0 评论 -
html5 手把手教你做游戏《熊和蘑菇》(二)
上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~达到这个效果：http://www.html5china.com/html5games/mogu/index1.html一、写html代码XML/HTML Code复制内容到剪贴板1. 2. 3. 4. 5. ...原创 2011-03-17 17:21:33 · 149 阅读 · 0 评论