最终效果与总结，H5+JS+CSS3实现七夕言情教程-慕课网

第8章背景音乐
编程：8-1 HTML5 audio

最终效果与总结

整个七夕主题到这节都已经完全讲解完毕了，最终会把所有设置的参数都合并到了confi配置文件中，同时也增加了一些配置，例如正比缩放，这样可以保持页面布局缩放看起来不会变型

这个案例不算很难，但是把前端做动画的一些精髓已经讲透了。运用的技术基本就是H5+JS+CSS3，但是每个部分的实现都会有很多知识点的涉及，这里大体的总结下

自适应分辨率的问题可以采用的是JS+百分比布局处理
通过合成"雪碧图"解决图片加载与资源占用的问题
通过CSS3的animation实现帧动画，并且可以控制状态
布局除了left.top布局外，还可以使用最新的css3的transform处理
元素的变化，可以通过设置translate3d启动GPU加速
可以用CSS3的transition做渐变动画
HTML5音频的使用
采用promise可以解决异步编程的逻辑嵌套问题
代码组织的一些思路

整个案例涉及的东西都是我们日常开发能够使用到的一些手段，希望可以通过这个案例把前端的一些方面的知识点给融合贯穿起来，从而得到系统透彻的理解，并且能有举一反三，融汇贯通的效果！

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
资料下载
代码

全部精华我要发布

最后怎么整合的？

+ 我来回答回答最高可+2积分

2 回答 1053 浏览

2022-03-30

最后我都不晓得怎么把这些东西衔接起来

最新回答 / 蕳兮

你可以选择把这页复制下来，里面有那个连接可以跳过去，然后下载那个代码。。。或许这个办法比较低级吧

1 回答 1432 浏览

2018-07-03

小男孩和小女孩的位置

最新回答 / 慕仔4344333

111

1 回答 817 浏览

2017-03-09

animationEnd这个函数是什么意思呢

最新回答 / 慕粉3828920

早期的一些以webkit为内核的浏览器，如Safari 3.1 到 6.0 代码，该CSS动画结束事件名为webkitAnimationEnd，后来统一标准为animationend，这个函数为了后面使用 CSS动画结束事件而已。

2 回答 1262 浏览

2018-01-02

求音乐播放问题

最新回答 / Cherry_c

因为那个音频资源找不到，你可以下载到本地，课程有音乐资源，相对地址引用就可以了

2 回答 1240 浏览

2017-03-06

求源码，求源码完整版

最新回答 / 非典型材料IT男

<...code...>加入了一些自己的小修改。后期会进一步优化以及加上更多效果。欢迎star 欢迎fork

2 回答 1265 浏览

2017-05-03

求源码求源码

已采纳回答 / 瑜伽兔子

https://github.com/junnanzhang/lina 参考我的

3 回答 1513 浏览

2016-10-28

男孩位置出错

最新回答 / stone310

运行的时候f12看下女孩位置在哪，然后手动调整下?

1 回答 693 浏览

2016-09-17

背景音乐播放不了

最新回答 / 慕粉3604008

检查路径是否写错。

1 回答 897 浏览

2016-08-23

最后是怎么整合的？

最新回答 / 李家长已阅

将各个部分的操作，封装在对象中，通过调用的方式运行。

1 回答 926 浏览

2016-09-16

整合代码JS报错

最新回答 / SevenKey

each.(function(index,element)), index是索引，element相当于this，指每一个遍历的元素，想要使用sliders里的元素可以是用this或者silders[e]或者element 而且eq(index) 是指找到索引为index的元素。

2 回答 1331 浏览

2016-08-23

最后连接？

最新回答 / echo_kinchao

是不是逻辑写错了

1 回答 906 浏览

2016-08-23

最后是怎么合并的？

+ 我来回答回答最高可+2积分

3 回答 955 浏览

2022-04-20

雪碧图是怎么做的。。。

已采纳回答 / Perona

可以参考这门课：http://www.imooc.com/learn/93

1 回答 1782 浏览

2016-08-23

没压缩过的源文件有吗？新人求学习！

最新回答 / 慕雪8121943

这是copy出来的还不知道整合

3 回答 1288 浏览

2018-05-07

全部我要发布

最热最新

只看我的

七夕主题课程素材图片立即下载
七夕主题课程音乐素材立即下载

9-1 最终效果与总结