上图便是这个音频播放器的UI界面图，里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成，看上去有难度的地方就只有CD和打碟器的制作了，在歌曲播放时CD和打碟器都是具有动画交互效果的，这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~因为这一期的教程主要是为了展示Html5新增的<audio>标签和audio元素的Dom API的使用，所以播放器UI的...
终于把这套课程讲完了，虽然时间隔了很长，但也算有始有终了，这是在YY讲课中我自己录的，讲了网页设计的基础，这也是我第一次给那么多人讲课，讲的不好多多包涵。前几次视频和课件是分开的，后几次都打包在一起了，由于第三章是教使用Dreamweaver，而我建议开始学的时候使用文本编辑器，因此就没讲这章，等学完基础，相信你们能够自己摸索Dreamweaver的使用。视频：第一、二章网页设计语言基础(1)：http://yun.baidu.com/s/1sjz2V...
通过jquery+html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。效果图：HTML代码：复制代码代码如下:<nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul></nav>jQuery代码：通过以下jquery代码，会把<div id="menu-icon">添加到<nav id="nav_wrap">中，当点击 #menu-icon 时，菜单就会显示出来：复制代码代码如下:<script type="text/javascr...
第6章 贪吃蛇的实现及代码讲了不少东西了，老讲理论的东西没劲呀，我们不如先试着做一个小游戏吧。作为我们的第一个游戏，当然是越简单越好。《贪吃蛇》大家应该都玩过吧？我觉得我玩过的游戏中，她应该算是最简单的一个了。好，就让我们从做《贪吃蛇》开始，享受自己做游戏的乐趣吧。由于这个游戏是本教程的第一个实际的游戏例子，我会讲的比较详细一些。请大家重点注意编程的思路和实现的方法，这些远比代码本身要重要。一，蛇身...
前一节我们讲述了怎么在新建的作品中添加元素，元素加好以后我们还想让他们动起来，来实现比较炫的效果。这节我们将要讲述怎么给元素添加动画。Mugeda动画是通过时间轴和帧来实现的。通过在时间轴上创建图层和单元，您可以在几分钟内创建专业动画。 时间轴界面如下图。对于要在移动设备上投放的作品，帧速最好不要超过12，因为帧速太快有些移动设备会比较吃力，设置帧速在属性区。动画图层是用来组织添加对象 每个图层可以包含一...
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。 说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下： 复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。 我之所以把控制点的坐标带...
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 ?ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 ?ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ?ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个...
这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。 下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。 HTML代...
一、indexedDB为何替代了Web SQL Database？跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样，在前端领域，也不是哪来先出来哪个就在日后引领风骚的。HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。未来一定是indexedDB的，从目前浏览器的兼容性来看，也表明...
闲话少说，本文作者为大家收集了网上学习HTML5的资源，期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个，由于第5个和第8个是反复的。原文在此!1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman毫无疑问,HTML5是一个热门话题。假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的。我将介绍新的语义标签(markups)、 使用canvas进行绘制和动画、视频(<video>)和音频(<au...
前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝赛尔曲线了，如果你学过某些画图工具，就能马上理解。 bezierCurveTo的语法如下： ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下，其中的（x1,y1）即控制点1的...
第4章 移动的控制一，捕获键盘击键的原理有很多种方法可以控制游戏中图形的移动，常用的有键盘控制、鼠标控制以及屏幕上的按钮控制等。其中键盘控制比较简单，比较适合初学者，我们先来讲这种方法。其实键盘上的每一个按键，在我们按下去的时候，会向电脑中传送一个编号。比如A的编号是65，B是66。在这一章里，我们只需要记住4个键就可以了，她们是光标的上下左右键。向上的编号是38，向下是40，向左是37，向右是39。所以键盘捕获的...
[Mugeda HTML5技术教程之2] Mugeda
HTML5动画平台简介 摘要：Mugeda提供基于云的平台，供开发人员和设计人员快速的开发、发布和统计基于HTML5的，包含丰富动画和交互的移动富媒体内容。在上一篇教程中，我们大致分析了HTML5的现状以及今后的发展趋势。在移动浏览器（含浏览器控件）中渲染的HTML5应用，将会和移动原生应用相辅相成，共同发展，在移动互联网大潮中扮ch来越重要的角色。另一方面，开发HTML5应用目前仍然存在成本高、...
构建一个餐馆选择的 Web 应用How to build a jQuery Mobile app for choosing a restaurant based on what the user want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. 创建一个良好移动体验应用For larger data-focused sites, or sites that are "almost applications" you will want to consider a custom mobile version of your site. This is often done with the help ...
要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。 直接上DEMO吧：放烟火 原理很简单。。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化...
以前，在web上要显示灰度图片的话，只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程，而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo，来展示如何实现这个功能。