记一次web前端开发经验（持续更。。）

最新推荐文章于 2024-02-07 10:05:00 发布

Qiya_leo

最新推荐文章于 2024-02-07 10:05:00 发布

阅读量1.1k

点赞数

分类专栏：个人生活文章标签： HTML5 网页设计七夕网页特效

本文链接：https://blog.csdn.net/xiaozhuyirena/article/details/52132835

版权

个人生活专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为了在七夕的时候给女朋友一个惊喜，作为前端开发的我，希望用自己学的东西给异地的女朋友一个浪漫的七夕，虽然不能亲自去陪她，但希望为她做的这个网站她能喜欢。

因为是刚入前端不久，所以在制作工程中遇到了不少问题，但都一一解决了，这些问题也是前端经常会遇到的问题，我现在就总结一下，方便自己，也方便一些和我一样的小白。废话不多说了，现在就开始啦：

（一）：怎么给网页添加背景音乐

这是我遇到的第一个问题，因为毕竟是一个七夕网站，想通过音乐让让气氛温暖起来，我知道这是一个比较简单的作用，但因为标签用的不熟所以很多都是现学现搜；

我首先使用的是embed标签，但发现会产生浏览器兼容性问题，只能在IE浏览器中正常播放，在chrom里面竟然不可以

这个标签记得是<body></body>标签里面；这个是背景音乐，不显示播放器菜单，loop=true 代表无线循环 hidden就是隐藏了

<embed src="video/love.wma" autostart="true" loop="true" hidden="true"></embed>

浏为了解决览器兼容问题我又添加了如下代码：

<!--[if IE]>
<bgsound  id="bgsound" src="video/love.mp3" loop="-1">
<![endif]-->
<audio   autoplay="autoplay" id="music"   loop="loop">
<source src="video/love.wma" type="audio/wma">
<source src="video/love.ogg" type="audio/ogg">
</audio>

这样添加以后音乐就可以正常播放了；

（二）怎么调节网页背景音乐

因为当我打开网页以后，发现音量很大，所以我想把背景音乐调节小一点，不会影响页面中视频的声音，度娘了以后，发现有的说volume属性可以调节0-100，但测试以后，发现不是支持所有的，然后发现用js代码是可以的，代码如下：

<script>
   document.getElementById("music").volume = 0.1;
</script>

（三）在网页中添加花瓣飘落的特效

七夕配着玫瑰花才更浪漫，怎么在页面中飘落花瓣是我一直想做的，做之前呢需要引入两个JS文件链接，图片里面也有的；

记得在<head>标签里引入

<script src="js/jquery-1.2.6.min.js"></script>
<script src="js/snowfall.jquery.js"></script>

然后在<body>标签里引入下方代码，图片资源可以自己替换的；

<script>
   $(document).snowfall('clear');
   $(document).snowfall({
      image: "images/mei.png",
     
      flakeCount:30,
      minSize: 5,
      maxSize: 22
   });
</script>

（四）网站成型

终于在昨晚完成了网站的上传还有域名绑定，但是在上传虚拟主机的时候遇到了一个问题，背景音乐无法播放，但是在本地都是可以的，我咨询了技术，和查看了后台代码以后才发现虚拟主机支持的是.mp3格式的文件，且浏览器用的是<audio>标签，而我的<audio>标签刚好没有放.mp3格式的，在<audio>标签添加一行

音乐即可播放了。附上七夕的网站链：点击打开链接

不过说一句，由于用的香港虚拟主机，所以在速度上有点慢，因为不涉及到后台修改太多，没有采用动态页面，全是静态的，大神看到勿喷！

Qiya_leo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记一次web前端开发经验（持续更。。）

为了在七夕的时候给女朋友一个惊喜，作为前端开发的我，希望用自己学的东西给异地的女朋友一个浪漫的七夕，虽然不能亲自去陪她，但希望为她做的这个网站她能喜欢。因为是刚入前端不久，所以在制作工程中遇到了不少问题，但都一一解决了，这些问题也是前端经常会遇到的问题，我现在就总结一下，方便自己，也方便一些和我一样的小白。废话不多说了，现在就开始啦：（一）：怎么给网页添加背景音乐这是我遇到的第一个问题
复制链接

扫一扫