“约会”的总结

最新推荐文章于 2020-06-22 00:42:17 发布

jojo付啾啾

最新推荐文章于 2020-06-22 00:42:17 发布

阅读量495

点赞数

分类专栏： demo 文章标签： html css3 js Audio

本文链接：https://blog.csdn.net/DreamFJ/article/details/69844954

版权

demo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在慕课网上看到一个关于七夕言情的小短片，觉得蛮有意思的，于是自己用原生JS实现了一遍。
整个短片分为三个场景：场景一是小男孩悠闲的走在路上；场景二是小男孩去花店买花；场景三是小男孩前往桥上与小女孩约会。大致的情景如下图所示。
情景一（闲逛）：

情景二（买花）：

情景三（约会）：
这里写图片描述

分析：
整体布局：三个场景是连贯的，所以可以组织在一个“ul列表”里面，但是每次只显示一个情景，所以列表可以放在一个“div容器”当中，控制显示的宽度，而小男孩是贯穿整个场景的，不是位于某一个场景里的，所以“小男孩”可以与ul列表并列放在容器当中。
场景一：我们可以发现场景一里面除了“背景图片”和小男孩之外还有移动的“云”和“太阳”；
场景二：场景二中有“背景图片”“门”、“飞鸟”，细心的朋友会发现小男孩进花店的时候店右边墙上的灯点两个，其实这是监听到小男孩走到花店时将背景图换了；
情景三：三中有“背景图片”、“闪烁的小星星”、“荡漾的水波”及“女主角”。

根据上面的分析，可以搭出整个情景图的html结构如下：

<body>
    <!-- 设置100%宽高 -->
    <div id="theme" class="theme">
        <ul id="content" class="content">
            <li>
                <div class="backgroundA">
                    <img src="images/A.png" alt="图片一">
                    <!-- 云 -->
                    <div class="cloud">
                        <div class="cloud1"></div>
                        <div class="cloud2"></div>
                    </div>
                    <!-- 太阳 -->
                    <div class="sun"></div>
                </div>
            </li>
            <li>
                <div class="backgroundB">
                    <img id="imgB" src="images/B-dark.png" alt="图片二">
                    <!-- 门 -->
                    <div id="door" class="door">
                        <img id="leftDoor" class="leftDoor" src="images/door-left.png" alt="左门">
                        <img id="rightDoor" class="rightDoor" src="images/door-right.png" alt="右门">
                    </div>
                    <!-- 小飞鸟 -->
                    <div id="bird" class="bird"></div>
                </div>
            </li>
            <li>
                <div class="backgroundC">
                    <img src="images/C.png" alt="图片三">
                    <!-- 小女孩 -->
                    <div id="girl" class="girl"></div>
                    <!-- 小星星 -->
                    <div class="stars">
                        <div class="star1"></div>
                        <div class="star2"></div>
                        <div class="star3"></div>
                        <div class="star4"></div>
                    </div>
                    <!-- 水 -->
                    <div class="water">
                        <div class="water1"></div>
                        <div class="water2"></div>
                        <div class="water3"></div>
                        <div class="water4"></div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 小男孩精灵图，通过修改background-position来达到走路的效果 -->
        <div id="boy" class="boy-walk"></div>
    </div>
</body>

其中，
小男孩走路的动作、云移动、太阳落下、小鸟拍翅膀、星星闪烁、水波荡漾及男女孩转身都是通过CSS3的动画animation实现的；
小男孩向前走动、背景图片移动、门的开关及小鸟向前飞行都是通过CSS3的过渡transition实现的。
整个情景实现的难点就是在什么时候进行下一个动画，这个时候就要采用JS的事件监听，为上一个动作的完成添加过渡完成事件，addEventListener(“transitionend”,function); 表示上一动作过渡完后执行function函数。
还用到了html5中的插入音频的方法，先通过var audio = new Audio(“url”); 传入音频的地址，定义一个音频对象；然后设置是否循环播放audio.loop = loop || false; 最后设置播放audio.play();即可。

整个实现我近两天整理完成放到github上：https://github.com/DreamFJ/JavascriptDemo

jojo付啾啾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“约会”的总结

最近在慕课网上看到一个关于七夕言情的小短片，觉得蛮有意思的，于是自己用原生JS实现了一遍。整个短片分为三个场景：场景一是小男孩悠闲的走在路上；场景二是小男孩去花店买花；场景三是小男孩前往桥上与小女孩约会。大致的情景如下图所示。情景一（闲逛）：情景二（买花）：情景三（约会）：分析：整体布局：三个场景是连贯的，所以可以组织在一个“ul列表”里面，但是每次只显示一个情景，所
复制链接

扫一扫