为了在七夕的时候给女朋友一个惊喜,作为前端开发的我,希望用自己学的东西给异地的女朋友一个浪漫的七夕,虽然不能亲自去陪她,但希望为她做的这个网站她能喜欢。
因为是刚入前端不久,所以在制作工程中遇到了不少问题,但都一一解决了,这些问题也是前端经常会遇到的问题,我现在就总结一下,方便自己,也方便一些和我一样的小白。废话不多说了,现在就开始啦:
(一):怎么给网页添加背景音乐
这是我遇到的第一个问题,因为毕竟是一个七夕网站,想通过音乐让让气氛温暖起来,我知道这是一个比较简单的 作用,但因为标签用的不熟所以很多都是现学现搜;
我首先使用的是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>标签添加一行
<source src="video.mp3" type="audio/mp3">
音乐即可播放了。附上七夕的网站链:点击打开链接
不过说一句,由于用的香港虚拟主机,所以在速度上有点慢,因为不涉及到后台修改太多,没有采用 动态页面,全是静态的,大神看到勿喷!