手机做小项目，需要添加音乐，做此笔记，依赖jquery，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ margin:0; padding:0; }
/**
* 声音元件
*/
.z-hide{ display:none; }
.u-audio { position: absolute; top: 40px; right:20px; width: 132px; height: 73px; z-index: 200; }
.u-audio .btn_audio { width: 100%; padding-top: 29px; height: 44px; border:1px solid #eee; }
.u-audio .btn_audio .audio_open { display: inline-block; height: 44px; line-height: 44px; vertical-align: middle; background-color:#eee; cursor:pointer; position: absolute; bottom: 0; left: 56px; width: 44px; }
.u-audio.z-low { z-index: 1; }
</style>
</head>
<body>
<!-- 音乐 -->
<section class=‘u-audio f-hide‘ data-src=‘onlylove.mp3‘>
<p class="btn_audio">
<strong class=‘txt_audio z-hide‘>关闭</strong>
<span class=‘css_sprite01 audio_open‘></span>
</p>
</section>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
;(function($){
function vedioFun(){
this._audioNode = $(".u-audio");
this._audio = null;
}
vedioFun.prototype.audio_init = function(){
if (this._audioNode.length >0 ){
var t = {
loop: !0,
preload: "auto",
src: this._audioNode.attr("data-src")
};
this._audio = new Audio;
for (var e in t) t.hasOwnProperty(e) && e in this._audio && (this._audio[e] = t[e]);
this._audio.load();
}
}
vedioFun.prototype.audio_addEvent = function() {
var audio = this._audioNode.find(".txt_audio"),
a = null,
btn = audio.siblings(".audio_open");
function t(t, e, n) {
if(e){
t.text("打开");
btn.addClass("js-audio-open");
}else{
t.text("关闭");
btn.removeClass("js-audio-open");
}
n && clearTimeout(n),
t.removeClass("z-move z-hide"),
n = setTimeout(function() {
t.addClass("z-move").addClass("z-hide")
},1e3);
}
if (this._audioNode.length > 0) {
$(this._audio).on("play",function(){
t(audio, !0, a);
}),
$(this._audio).on("pause",function(){
t(audio, !1, a);
})
}
}
vedioFun.prototype.media_init = function(){
var self = this;
self.audio_init();
self.audio_addEvent();
$(window).on("load",function() {
self._audio.play();
self._audioNode.find(".btn_audio").on("click",function() {
self._audio.paused ? self._audio.play() : self._audio.pause()
});
});
}
var video = new vedioFun();
video.media_init();
})(jQuery);
</script>
</body>
</html>
时间： 2024-10-12 03:06:29