jQuery音乐均衡器插件equalizer特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery音乐均衡器插件equalizer特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='gb2312' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<title>jQuery音乐均衡器插件equalizer</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/jquery.equalizer.css" />
</head>
<body>
<section id="main_section">
	<div class="relative_left" style="width: 600px;margin: 30px 0px;height: 300px;left : 50%;margin-left: -300px;">
		<h2 id="title">jQuery音乐均衡器插件equalizer</h2>
		<div id="equalizer">
			<audio autoplay controls loop>
				<source src="http://xunlei.baidu.com/Files/DownLoad/sound1/201603/7030.mp3" type='audio/ogg'>
				<source src="http://xunlei.baidu.com/Files/DownLoad/sound1/201603/7030.mp3" type='audio/mpeg'>	
			</audio>
		</div>
	</div>
</section>

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.reverseorder.js"></script>
<script type="text/javascript" src="js/jquery.equalizer.js"></script>
<script>
	$(document).ready(function(){
		
		$("#ad_container span").click(function(){
			$("#ad_container").fadeOut(400);
		});
		
	});
</script>
</body>
</html>

CSS代码(jquery.equalizer.css):

#equalizer{position:relative;float:left;width:600px;height:100px;margin-top:40px;}
#equalizer audio{position:absolute;left:0px;top:0px;opacity:0.5;z-index:100;}
.equalizer_bar{position:relative;float:left;}
.equalizer_bar_component{position:relative;float:left;width:100%;}

CSS代码(main.css):

*{padding:0px;margin:0px;font-family:"Quattrocento Sans";color:#4F4C4D;line-height:160%;}
html{background:#F1F1F1 url("../img/body_bg.jpg") repeat;}
a,a *{cursor:pointer;text-decoration:none}
a img{border:none;}
@media (max-width:1260px) and (min-width:640px){@-viewport{width:device-width;orientation:landscape;}
}
img{border-radius:3px;}
@-ms-viewport{width:device-width;}
.relative_left{position:relative;float:left;}
.relative_right{position:relative;float:right;}
#bojp_logo{position:relative;float:left;margin:20px;}
#like_container{position:absolute;left:-20px;top:30px;}
#twitter_follow_container{position:absolute;left:150px;top:30px;}
#plus1_container{position:absolute;left:70px;top:30px;}
#main_section{position:relative;float:left;width:1260px;left:50%;margin-left:-630px;box-shadow:0px 0px 5px #7D5D72;}
#main_header_wrapper{position:relative;float:left;background-color:#F6F6F6;border-bottom:1px solid #E1E1E1;width:100%;z-index:9999;}
#main_header{position:relative;float:left;width:1258px;left:50%;margin-left:-629px;}
#main_footer_wrapper{position:relative;float:left;width:100%;background-color:#F6F6F6;border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;z-index:9999;}
#main_footer{position:relative;float:left;width:1260px;left:50%;margin-left:-630px;padding:10px;}
.button_facebook{padding:5px 10px;border-radius:3px;color:#FFFFFF;background-color:#43609C;border:1px solid #223962;font-family:Verdana;cursor:pointer;}
.button_facebook:hover,.button_facebook:focus{box-shadow:0px 0px 5px #223962;}
.button{padding:5px 10px;border-radius:3px;color:#FFFFFF;background-color:#19AEFF;border:1px solid #7D5D72;cursor:pointer;}
.button:hover,.button:focus{background-color:#7D5D72;border-color:#19AEFF;box-shadow:0px 0px 5px #7D5D72;}
#ad_container{position:absolute;right:0px;margin:20px;border-radius:3px;border:1px solid #CCCCCC;width:300px;height:250px;}
#ad_container span{position:absolute;left:-25px;padding:3px 5px;color:#FFFFFF;background-color:#CCCCCC;margin:0px 5px;cursor:pointer;}
.button2{padding:5px 10px;background-color:#94B533;color:#FFFFFF;border:1px solid #CCCCCC;border-radius:3px;margin:5px;cursor:pointer;}
.button2:hover,.button2:focus{box-shadow:0px 0px 5px #7D5D72;}
#title{position:relative;float:left;width:600px;margin:30px 0px;font-weight:normal;font-size:30px;color:#484848;text-transform:uppercase;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)