移动端H5开发入门

2019阿里云全部产品优惠券(好东东,强烈推荐)
领取地址 https://promotion.aliyun.com/ntms/yunparter/invite.html

推荐:移动端H5知识普及[系列] - CSS3媒体查询

[移动端H5知识普及-CSS3媒体查询前些日子,趁平日空隙书写了类库系列,这几天就来“普及”一下移动端HTML5开发的小知识吧~!虽然知识小,但是不得不承认的是,它们很重要~

零、一些资料

    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提供的接口,需要使用时 查看一下文档就差不多);然后就是 一些页面之间的 过度、这部分 可能会用到 缩放、透明度转换、以及简单地动画效果。

推荐:【前端开发者福利】html5移动端常见问题集锦

[【前端开发者福利】html5移动端常见问题集锦]

二、干货

1、关于 加载进度条

    正所谓,不看不知道,一看吓一跳。之前、自己就一直在疑虑,这个加载进度是如何获得的。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 );
}
// 还是 先看一下 其他的吧。

2、背景音乐

<!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>

3.CSS3 新增动画、CSS3新增动画、CSS3新增动画(the point)

   先这样吧.

<!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>







推荐:移动端H5 css3模拟边框最新研究(超实用) by FungLeo

[移动端H5 css3模拟边框最新研究(超实用) by FungLeo前言在之前写的一篇博文《移动端H5的一些基本知识点总结 第五节 边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px

相关推荐