在微信开发中,单纯的页面展示并不能够吸引客户的眼球,需要有视觉和听觉的双重效果,才能够吸引住客户浏览,达到产品宣传的目的,前面说过很多页面的特效,今天我来说一种听觉上的效果,就是加上背景音乐,如何能够吸引住客户,那就需要你自己去选择合适的音乐了。废话不多说了,直接了看代码吧
// 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 (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
$("body").append('<bgsound id="bd_audio_1" src="' + basePath + mp3snd2 + '" loop="-1">');
}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 (navigator.userAgent.toLowerCase().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 (navigator.userAgent.toLowerCase().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代码很长。
<div class="music"><img src="images/music.gif"></div><!-- 音乐 -->
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;}
到这一步就大功告成了。