摘要: Android系统自带一个Gallery浏览图片的应用,通过手指拖动时能够非常流畅的显示图片,用户交互和体验都很好。本示例就是通过Gallery和自定义的View,模仿实现一个仿Gallery图像集的图片浏览效果。 阅读全文
posted @ 2012-04-12 21:29 张长胜 阅读(351) 评论(1) 推荐(0) 编辑
摘要: HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果。在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像两幅图片,利用制图工具实现渐变图片效果。现在HTML5让开发者通过HTML5与jQuery实现渐变绚丽网页图片效果。HTML 5和jQuery动态转换任意一张彩色图像为灰度显示展示。通过HTML5和jQuery向你展示如何创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的图像和灰度的图像版本版本。现在HTML5让开发者创建这个效果更加容易和高效,因为原始图像会直接生成灰度 阅读全文
posted @ 2012-04-12 20:12 张长胜 阅读(1064) 评论(0) 推荐(0) 编辑
摘要: 页眉header页眉将是页面加载的第一个元素,包含了站点的标题、logo、网站导航等。<header> <div class="container_16"> <div class="logo"> <h1><a href="index.html"><strong>Real</strong> Estate</a></h1> </div> <nav> <ul> <li><a hre 阅读全文
posted @ 2012-04-12 20:11 张长胜 阅读(470) 评论(0) 推荐(0) 编辑
摘要: HTMl5结构元素<nav>元素用构建一个页面或一个站点内的链接,并不是链接的每一个集合都是一个<nav>,比如:赞助商的链接列表及搜索结果页面就不是,因为他们是当前页面的主内容。 <nav> <p><a href=“/”>Home</a></p> <p><a href=“/about”>About</a></p> </nav><nav>元素是一个包装器,它不会代替<ol>或<ul>,但是会包围它。 <nav& 阅读全文
posted @ 2012-04-12 20:11 张长胜 阅读(297) 评论(0) 推荐(0) 编辑
摘要: 一、前言一撇其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征、窍门和技术”一文中就有所介绍,不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看。得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个“空”。所以,这里打个补丁,把这部分内容完善下。本文的大致内容有:# <input type=”number” /># <input type=”range” /># <input type=”date” /> 以及其他时间选择器控件 阅读全文
posted @ 2012-04-12 20:10 张长胜 阅读(427) 评论(0) 推荐(0) 编辑
摘要: HTML5基本布局HTML4HTML5<!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li>< 阅读全文
posted @ 2012-04-12 20:10 张长胜 阅读(433) 评论(0) 推荐(0) 编辑
摘要: 一、号外号外号外号外,HTML官方logo华丽丽滴诞生了。您可以起官方logo页面(点击这里)其观摩。它是如此的闪耀,以至于我不得不用手挡住眼前的强光,它的朝气,它的魄力迎面袭来,让人窒息。上图为截图,截图也是图。下图为其128卡哇伊袖珍版图片:下图为256蓬勃朝气青少年版的:下图为标准256*256 背景索引透明阳刚少年版:HTML5出了此款logo,意义重大。我觉得这标志着HTML5已经发展到了一个新的台阶,其发展与进步一不可阻挡,透出了HTML5的野心与霸气。此logo长得有点360安全卫士logo的味道:难道暗含防御之一,抵御flash或是其他杂碎技术的侵袭。谁知道呢?反正与本文主题无 阅读全文
posted @ 2012-04-12 20:09 张长胜 阅读(550) 评论(0) 推荐(0) 编辑
摘要: HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向。在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能:离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存 阅读全文
posted @ 2012-04-12 20:08 张长胜 阅读(529) 评论(0) 推荐(0) 编辑
摘要: Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML 5,本文总结了11个HTML 5的初级技巧,希望能对你进一步学习好HTML 5会有所帮助。1. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML 5的Doctyp 阅读全文
posted @ 2012-04-12 20:08 张长胜 阅读(464) 评论(0) 推荐(0) 编辑
摘要: Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关的教程。最新版本的Chrome,Safari和Opera浏览器都支持Web SQL数据库。核心方法本文将介绍规范中定义的三个核心方法:1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。2、transaction:这个方法允许我们根据情况控制事务提交或回滚。3、executeSql: 阅读全文
posted @ 2012-04-12 20:07 张长胜 阅读(416) 评论(0) 推荐(0) 编辑
摘要: Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍。一、Cache Manifest基础知识作为一个Web开发相关的人员,都不会少听到、看到Cache这个词。是的,上面也已经说了,它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件,这里进行了简单的整理:◆MIME TYPE:text/cache-manifest◆需要 阅读全文
posted @ 2012-04-12 20:06 张长胜 阅读(453) 评论(0) 推荐(0) 编辑
摘要: 22个HTML5 技巧三:我们继续讲解HTML5的技巧。16. 视频支持音频元素 <audio>非常像,在新的浏览器上也支持HTML5视频。事实上,就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是,由于HTML5说明文件并没有为视频指出某个特定的编码器,所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频,Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此,显示HTML5视频的时候,你必须提供两种格式。17. 视频预先加载你首先需要决定是否需要浏览器来预先加载视频。是否有需要?假设,一个访客进入某个专门用 阅读全文
posted @ 2012-04-12 20:05 张长胜 阅读(291) 评论(0) 推荐(0) 编辑
摘要: 22个HTML5 技巧二:上面一章讲到了HTML5的几个技巧,现在我们来学习新的技巧。8. 占位符此前,我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />9. 本地存储多亏了HTML5的 local storage ,我们可以让高级浏览器"记住"我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不 阅读全文
posted @ 2012-04-12 20:05 张长胜 阅读(345) 评论(0) 推荐(0) 编辑
摘要: 这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效,因为灰色图像将会直接从原始文件生成。我希望你会发现这个脚本在例如陈列橱或者相片册的设计里相当有用。 下面的jQuery代码会找寻目标图像并生成一个灰度的版本。当鼠标悬浮在图像上,代码将会把灰度图像渐变为彩色的。<mce:scriptsrc="jquery.min.js"mce_src="jquery.min.js"type="text/j 阅读全文
posted @ 2012-04-12 20:04 张长胜 阅读(294) 评论(0) 推荐(0) 编辑
摘要: HTML5 技巧一:当今科技发展的速度真惊人,稍不留神,就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜,我们将通过这篇文章向大家介绍一些HTML技巧。1. 新的文档类型(Doctype)<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>上面这个既麻烦又难记的XHTML文档类型你还在使用吗? 如果还是这样的话,现在该切换到新的HTML5文档类型了。<!DO 阅读全文
posted @ 2012-04-12 20:04 张长胜 阅读(335) 评论(0) 推荐(0) 编辑
摘要: HTML5 canvas 元素详细教程六:组合。之前的例子里面,我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的。比如说,它这样受制于图形的绘制顺序。不过,我们可以利用globalCompositeOperation属性来改变这些做法。globalCompositeOperation我们不仅可以在已有图形后面再画新图形,还可以用来遮盖,清除(比clearRect方法强劲得多)某些区域。globalCompositeOperation= typetype是下面 12 种字符串值之一:注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新 阅读全文
posted @ 2012-04-12 20:03 张长胜 阅读(295) 评论(0) 推荐(0) 编辑
摘要: HTML5 canvas 元素详细教程七:基本的动画。由于我们是用脚本去操控 canvas 对象,这样要实现一些交互动画也是相当容易的。只不过,canvas 从来都不是专门为动画而设计的(不像 Flash),难免会有些限制。可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有东西(包括之前的)进行重绘。重绘是相当费时的,而且性能很依赖于电脑的速度。基本动画的步骤 Basic animation steps画一帧,你需要以下一些步骤:清空 canvas除非接下来要画的内容会完全充满 canvas (例如背景图),否则你需要清空所有。最简单的做法就是用clea 阅读全文
posted @ 2012-04-12 20:03 张长胜 阅读(301) 评论(0) 推荐(0) 编辑
摘要: HTML5 canvas 元素详细教程五:上一节讲了应用风格和颜色,这一节我们讲canvas的变形。状态的保存和恢复 Saving and restoring state在了解变形之前,我先介绍一下两个你一旦开始绘制复杂图形就必不可少的方法。save()restore()save和restore方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的,每一次调用save方法,当前的状态就会被推入堆中保存起来。这种状态包括:当前应用的变形(即移动,旋转和缩放,见下)strokeSty 阅读全文
posted @ 2012-04-12 20:02 张长胜 阅读(291) 评论(0) 推荐(0) 编辑
摘要: JS让浏览器支持HTML5 用JS脚本,让你的网站兼容IE浏览器。HTML5 SHIV的调用和下载html5.js一定要加在<head></head>里调用 (因为浏览器必须先解释了这个脚本才能解析后面的html5标签,所以不能放在页面底部)下面是下载地址:http://html5shiv.googlecode.com/svn/trunk/html5.js你可以直接调用这个js脚本,用IE条件注释来调用这个js文件,这样像FireFox等非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。下面这段代码仅会在IE浏览器下运行:复制内容到剪贴板<!--[if 阅读全文
posted @ 2012-04-12 20:01 张长胜 阅读(214) 评论(0) 推荐(0) 编辑
摘要: HTML5 canvas 元素详细教程四:运用样式与颜色。在 绘制图形 的章节里,我只用到默认的线条和填充样式。而在这一章里,我们将会探讨 canvas 全部的可选项,来绘制出更加吸引人的内容。色彩 Colors到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle和strokeStyle。fillStyle= colorstrokeStyle= colorstrokeStyle是用于设置图形轮廓的颜色,而fillStyle用于设置填充颜色。color可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象 阅读全文
posted @ 2012-04-12 20:01 张长胜 阅读(454) 评论(0) 推荐(0) 编辑