找回密码
 立即注册

博客首页背景音乐HTML代码

[复制链接]
发表于 2023-1-5 14:17:59 | 显示全部楼层 |阅读模式
资源类型:WEB开发 » PHP编程 » 源代码. 资源来源:网友投递
<style type="text/css">
.btnAudio{ width:36px; height:36px; position:absolute; right:30px; top:18px; overflow:hidden; background:url("http://pan.cccyun.cc/view.php/7a1a6d1c1426c7ce866712f1c058b69d.png") left top no-repeat; z-index:100;}
.rotate1circle{-webkit-animation:rotate1circle 1s linear infinite;}
@-webkit-keyframes rotate1circle {
        0% {
                -webkit-transform-origin:center center;
                -webkit-transform:rotate(0deg);
        }
        100% {
                -webkit-transform-origin:center center;
                -webkit-transform:rotate(360deg);
        }
}
</style>

<section class="u-audio hidden" data-src="http://wap.gx.10086.cn/xhtml/images/healthassist/bgmusic.mp3"></section>
<div class="btnAudio" id="btnAudio"></div>

<script>
var bg_audio_val = true;
var bg_audio = new Audio();
function audio_init(){
        var options_audio = {
                loop: true,
                preload: "auto",
                src: $('.u-audio').attr('data-src')
        }
        for (var key in options_audio) {
                bg_audio[key] = options_audio[key];
        }
        bg_audio.load();
        audio_addEvent();
        bg_audio.play();
}
function audio_addEvent(){
        $("#btnAudio").on('click', audio_control);
        $(bg_audio).on('play',function(){
                bg_audio_val = false;
                $('#btnAudio').addClass('rotate1circle');
        })
        $(bg_audio).on('pause',function(){
                $('#btnAudio').removeClass('rotate1circle');
        })
}
function audio_control(){
        if(!bg_audio_val){
                bg_audio.pause();
                bg_audio_val = true;
        }else{
                bg_audio.play();
        }
}
audio_init();
</script>

(<style type="text/css">
.btnAudio{ width:36px; height:36px; position:absolute; right:30px; top:18px; overflow: hidden; background:url("http://pan.cccyun.cc/view.php/7a1a6d1c1426c7ce866712f1c058b69d.png" ) left top no-repeat; z-index:100;}
.rotate1circle{-webkit-animation:rotate1circle 1s linear infinite;}
@-webkit-keyframes rotate1circle {
        0?
                -webkit-transform-origin: center center;
                -webkit-transform:rotate(0deg);
        }
        100?
                -webkit-transform-origin: center center;
                -webkit-transform:rotate(360deg);
        }
}
</style>

<section class="u-audio hidden" data-src="http://wap.gx.10086.cn/xhtml/images/healthassist/bgmusic.mp3"></section>
<div class="btnAudio" id="btnAudio"></div>

<script>
var bg_audio_val = true;
var bg_audio = new Audio();
function audio_init(){
        var options_audio = {
                loop: true,
                preload: "auto",
                src: $('.u-audio').attr('data-src')
        }
        for (var key in options_audio) {
                bg_audio[key] = options_audio[key];
        }
        bg_audio.load();
        audio_addEvent();
        bg_audio.play();
}
function audio_addEvent(){
        $("#btnAudio").on('click', audio_control);
        $(bg_audio).on('play', function(){
                bg_audio_val = false;
                $('#btnAudio').addClass('rotate1circle');
        })
        $(bg_audio).on('pause', function(){
                $('#btnAudio').removeClass('rotate1circle');
        })
}
function audio_control(){
        if(!bg_audio_val){
                bg_audio. pause();
                bg_audio_val = true;
        }else{
                bg_audio.play();
        }
}
audio_init();
</script>)





上一篇:大兄弟开源网盘程序v1.0
下一篇:禁止右键菜单代码、禁止复制粘贴代码

使用道具 举报

Archiver|手机版|小黑屋|吾爱开源 |网站地图

Copyright 2011 - 2012 Lnqq.NET.All Rights Reserved

关于本站 - 版权申明 - Ln Studio! - 广告联系

本站资源来自互联网,仅供用户测试使用,相关版权归原作者所有

快速回复 返回顶部 返回列表