html5加背景⾳乐代码，开发给⽹页页⾯添加背景⾳乐2015-05-21 16:10:23
在开发中，单纯的页⾯展⽰并不能够吸引客户的眼球，需要有视觉和听觉的双重效果，才能够吸引住客户浏览，达到产品宣传的⽬的，前⾯说过很多页⾯的特效，今天我来说⼀种听觉上的效果，就是加上背景⾳乐，如何能够吸引住客户，那就需要你⾃⼰去选择合适的⾳乐了。废话不多说了，直接了看代码吧
// JavaScript Document
var audios = window["audios"] || {};
audios = {
aud:'',
play : function () {
var basePath = "music/";
var mp3snd = "a.mp3";
var mp3snd2 = "bg.wav";
var bkcolor = "000000";
if ( ("#bd_audio_1").length>0 ) {
return false;
}
if(this.aud != ""){
this.aud.play();
return false;
}
if (LowerCase().indexOf("msie") != -1) {("body").append('');
}else {
this.aud = new Audio();
this.aud.src = basePath + mp3snd;
this.aud.loop = "loop";
this.aud.load();
setTimeout(function(){
audios.aud.play();
},300);
}
},
bdBtn : function(_DOM){/* 暂停的操作 */
(_DOM).attr("status",'1');("div").delegate(_DOM, "touchstart", function(){
/
*在这⾥使⽤的是touch事件，主要⽤于移动设备，如果你设置清除默认样式，那么久需要使⽤touch事件，如果没有，你可以将touchstart更改为click，如果不更改的话也可以正常实现点击事件，但是在pc端就会使⿏标点击失效。*/
var st = (this).attr("status");
if(st == '1'){
if (LowerCase().indexOf("msie") != -1) {("#bd_audio_1")[0].src="";
}else{
audios.aud.pause(); /* 暂停 */
(".music").find('img').attr("src",'images/music.png');/* 暂停的图⽚ ,music 是图⽚的class */
}(this).attr("status",'0');
}else{
(this).attr("status",'1');
代码转换
/* 播放的图⽚ */(".music").find('img').attr("src",'images/music.gif');
audios.play();/* 播放 */
}
});
},
stop : function(){
(".jp-video-play-icon").live("touchstart",function(){
if (LowerCase().indexOf("msie") != -1) {("#bd_audio_1")[0].src="";
}else{
audios.aud.pause();
}
});
}
};
$(document).ready(function () { /* 初始化 */
audios.play();
audios.bdBtn(".music");/* 点击的区域 */
});
这段js代码你可以将其封装成⼀个js⽂件，然后在html代码⾥引⼊就可以了，也可以直接写到html⾥，但这样会使html代码很长。
html部分代码就这么⼀⾏，很好理解，再看⼀下他的css样式
.
music{ width: 9%; height: 6%; position: fixed; top:20px; right: 20px; border-radius:45px; background: #fff; box-shadow:0 0 30px #f8fb04; z-index:11111; }
.music>img{ max-width:100%; max-height:100%; position: absolute; top: 3px; left: 0px;}
到这⼀步就⼤功告成了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。