标签： Firefox

介绍完了游戏部分，再来看看整个游戏界面部分的实现。整个游戏界面全部实现于一个页面之中，通过画面切换显示不同的功能。界面示意图如下：

界面切换时，通过调整div#cubeReel的left值，显示出不同的功能页。滚动动画效果通过jQuery的animate函数实现。
界面上的所有按钮样式均是通过CSS3实现，部分样式如下：

button {
/* ... */
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:hover, button.hover {
/* ... */
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:active {
box-shadow: 1px 1px 1px #ccc inset;
}

border-radius属性实现了按钮的圆角。box-shadow属性实现了阴影，按钮在一般状态下使用的外阴影，在按下状态时使用了内阴影（inset）。transition的应用使按钮在鼠标移入（hover）和移出时有渐变效果，示例代码只展示了Gecko所使用的-moz前缀的transition属性，不同的浏览器对transition的实现程度不同，-webkit、-o和-ms前缀的transition属性分别是WebKit、Opera和Internet Explorer的实现。

背景音乐则使用了HTML5中新的JavaScript对象Audio，它可以播放浏览器支持的音乐文件。使用方法类似于原来的Image对象：

（更多…）