移动端H5开发入门

lpe234

发布于 2020-07-28 15:06:40

2.2K0

发布于 2020-07-28 15:06:40

文章被收录于专栏：若是烟花若是烟花

零、一些资料

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

二、干货

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

http

html5

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

http

html5

登录后参与评论

0 条评论

热度