标签：
1. http://www.w3school.com.cn/h.asp
2. http://www.imooc.com/learn/33 # 感觉这个还是有些难度的，可以看一些其他的视频资料。“慕课网” nice~
首先声明一下自己吧。对JS和CSS都属于、马马虎虎的那种。昨天才发现 原来页面中的JS可以这样写。
(function ( window ) {
function aax( str ) {
alert(str);
}
window.aax = aax;
})(window);
// 这个应该就属于闭包了吧。然后将 window 当做参数传进去，
// 然后就可以在当前页面的 window 全局变量中使用 window.axx() 函数了
// 然后 又联想到 document, 不禁感慨 原来是这个样子
同样 也是昨天 才知道 CSS 中的 position 的值 都是什么意思。以及 display: block 将 div 设置成 "块"元素 才能设置 长和宽 。
其实，我这样说的目的是： 路漫漫其修远兮，学习没有捷径，不要惧怕自己不会的东西。只要努力，肯定没啥问题的。
然后再随便发表一些感慨吧。问渠那得清如许，为有源头活水来。
H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下，还是要熟悉一下的。然后就可以告诉他们：不就是CSS3新增的那几个动画属性，在加上一下JS的东西嘛，不难！^_^ 昨天看了一下午的一个H5。http://www.epub360.com/manage/book/o1dcvl/#page/page_13853534097181 对于初次见到的，可能感觉比较炫，一旦审美疲劳，感觉也就是那么回事了。首先，作为非前端人员、要 抛开绚烂的素材，来分析内部实现原理。
观察的多了，就会发现。都会有个 进度条或者类似的加载界面(后面你会知道比较坑)。然后就是 还会有一些背景音乐控制、个别的还存在视频(不用担心，都是H5提供的接口，需要使用时 查看一下文档就差不多)；然后就是 一些页面之间的 过度、这部分 可能会用到 缩放、透明度转换、以及简单地动画效果。
正所谓，不看不知道，一看吓一跳。之前、自己就一直在疑虑，这个加载进度是如何获得的。HTML标记语言，必须是所有DOM结构 加载完毕 浏览器才回显示的。
// 下面的 代码片段 是从 一个手机H5页面获取的，是不是发现啥了
function startLoading() {
// simulate loading something..
var simulationFn = function(instance) {
var progress = 0,
// 每80毫秒，执行一次该函数
interval = setInterval( function() {
// 最新进度 = 获取一个最小值(上一个进度+[0, 0.1), 1), 这样就生成的当前的进度 增量
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
// reached the end
if( progress === 1 ) {
classie.remove( container, ‘loading‘ );
classie.add( container, ‘loaded‘ );
// 当进度条 为1 时，进度条加载完成。进行后续页面操作
clearInterval( interval );
var onEndHeaderAnimation = function(ev) {
if( support.animations ) {
if( ev.target !== header ) return;
this.removeEventListener( animEndEventName, onEndHeaderAnimation );
}
classie.add( document.body, ‘layout-switch‘ );
window.removeEventListener( ‘scroll‘, noscroll );
};
if( support.animations ) {
header.addEventListener( animEndEventName, onEndHeaderAnimation );
}
else {
onEndHeaderAnimation();
}
}
}, 80 );
};
loader.setProgressFn( simulationFn );
}
// 还是 先看一下 其他的吧。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg-music">
<audio id="bg-music" src="http://qn.media.epub360.com/materials/audio/e8e76999019f1ec81f5ee0ca943e1c1c.mp3"></audio>
</div>
<div>
<button id="music-play">播放</button>
<button id="music-pause">暂停</button>
</div>
</body>
<script>
var bg_music = document.getElementById("bg-music");
var bg_play = document.getElementById("music-play");
var bg_pause = document.getElementById("music-pause");
// 播放音乐
bg_play.onclick = function () {
bg_music.play();
};
// 暂停音乐
bg_pause.onclick = function () {
bg_music.pause();
}
</script>
</html>
先这样吧.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.container {
position: absolute;
height: 480px;
width: 320px;
margin-top: 200px;
margin-left: 100px;
}
.slides {
left: 0;
top: 0;
width: 320px;
height: 480px;
position: absolute;
}
section {
height: 100%;
width: 100%;
background-color: #FFFFFF;
position: absolute;
display: block;
}
.section-fix {
width: 100%;
height: 100%;
margin-top: 0;
margin-left: 0;
position: absolute;
overflow: hidden;
}
.view {
position: absolute;
width: 0;
height: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0 none;
}
#section-1 {
height: 100%;
width: 100%;
}
#section-1-bg {
position: absolute;
left: -26px;
top: -37px;
width: 370px;
height: 560px;
opacity: 1;
}
#section-1-leaf {
position: absolute;
left: -1px;
top: -70px;
width: 116px;
height: 300px;
opacity: 1;
-moz-transition: all 2s;
-moz-animation: myfirst 4s infinite ;
}
#section-1-leaf:hover {
transform-origin: -1px -70px;
-moz-transform: rotate(10deg);
}
@-moz-keyframes myfirst {
0% {
position: absolute;
left: -1px;
top: -70px;
width: 116px;
height: 300px;
opacity: 1;
-moz-transition: all 2s;
}
50% {
transform-origin: -10px -120px;
-moz-transform: rotate(3deg);
}
100% {
position: absolute;
left: -1px;
top: -70px;
width: 116px;
height: 300px;
opacity: 1;
-moz-transition: all 2s;
}
}
</style>
<body>
<div class="container">
<div class="slides">
<section id="section-1">
<div class="section-fix">
<div class="view dynamic" style="z-index: 1000">
<div id="section-1-bg" class="image element">
<img src="jiangnan-2.jpg" />
</div>
</div>
</div>
<div class="section-fix">
<div class="view dynamic" style="z-index: 1001">
<div id="section-1-leaf" class="img element">
<img src="jiangnan-leaf.jpg" />
</div>
</div>
</div>
</section>
</div>
<!-- 背景音乐 -->
<div class="bg-music">
<div class="bg-music-audio">
<audio id="bg-music" src="http://qn.media.epub360.com/materials/audio/e8e76999019f1ec81f5ee0ca943e1c1c.mp3"></audio>
</div>
<div class="buttons">
<button id="music-play">播放</button>
<button id="music-pause">暂停</button>
</div>
</div>
</div>
</body>
<script>
var bg_music = document.getElementById("bg-music");
var bg_play = document.getElementById("music-play");
var bg_pause = document.getElementById("music-pause");
// 播放音乐
bg_play.onclick = function () {
bg_music.play();
};
// 暂停音乐
bg_pause.onclick = function () {
bg_music.pause();
}
</script>
</html>
标签：
原文地址：http://my.oschina.net/lpe234/blog/477597
