HTML5移动端动态数据报告

HTML5移动端动态数据报告

 2016-04-10 08:05    网页设计   标签：html css   1657    发表评论

最近慕课网上推出了一些实例，其中的《HTML5 移动端动态数据报告》是讲述通过html+CSS、JavaScript、JQuery、FullPage.js和Canvas来实现完整的手机端网页项目。通过这个项目，我们可以学习如何用Html来搭建简单的移动端网页，如何用CSS的@keyframes来实现关键帧动画，如何用JQuery的Fullpage.js插件来实现页面翻动效果以及如何用Html5的Canvas来实现绘图效果等。

课程评价为9.9分，并且慕课网将其作为收费项目，促销价78元。

对于我们这些想学习的朋友，这个价格似乎有点高了。你可能知道其中的某些东西，只是想了解另外一部分东西，那么，我们不妨将先学习些相似内容。

如何用Html来搭建简单的移动端网页，
如何用CSS的@keyframes来实现关键帧动画：

这两个内容可以通过另外一个项目来学习，它就是《 HTML5+CSS3实现春节贺卡》。通过这个项目的实践操作，我们可以了解一个小型的移动端网页是如何实现的。

它运用了Html+CSS的模式搭建了移动端网页的架构，运用了@keyframes命令来实现了一些常见小动画，并且运用了简单的JavaScript来实现了翻页效果。

这里还有上一个项目中没有的另外一个知识内容，就是音乐的调用和交互。如果你是想开发移动端网页，会经常遇到音乐这个内容的，建议先学习下。

视频里面有演示地址，可以通过它找到源文件(包括图片和声音)。我按照课程已经做出了一个demo环境。不过也同时发现，这个内容对一些小屏幕的手机兼容性还不够。所以还有扩展的空间。

如何用JQuery的Fullpage.js插件来实现页面翻动效果：

学习了基础的项目后，我们不难发觉，在日常手机浏览移动端页面时我们会使用很多滑屏事件。比如页面是上下滑动和左右滑动等。我们可以学习下《FullPage.js全屏滚动插件》。

我开始学习时走过一些弯路，以为学习完zepto.js或者JQuery才能继续掌握的滑屏实践。后来发现先学习需要的还是很简单的，所以推荐先到达目的地，然后再巩固学习基础知识。

如何用Html5的Canvas来实现绘图效果：

这个内容比较有针对性，这是针对这门课程中的图表内容来讲解的。大家看到上面这张图就不难发现，可以学习下Html5的Canvas来绘图了。

我还没看到那里，现在也有一个比较疑惑的地方，就是Canvas的兼容性。大家知道，Canvas这个标签是Html5特有的，在低版本的浏览器上是不支持的，不知道ipad/iphone和android版本的支持程度如何，有点期待。

“HTML5+CSS3实现春节贺卡”课程中曾经也使用了Html5的Video标签，其中控制声音转动的方法就是运用的html5的新方式，后来因为兼容的问题做了调整。

其他方面，它还讲解了一些使用“组件、类”组织代码便于扩展的知识，还讲述了一个整体项目是如何实现及管理的，对于想了解整体项目的朋友还是建议购买项目实践来学习吧。