<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery+HTML5ȫ�����ֲ���ר��ҳ����Ч</title>
<link href="assets/css/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/theme-1.css" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/jquery.audioControls.min.js"></script>
<script>
$(document).ready(function(){
var audioInitialVolume = 30;
var $sliderObj = $("#volumeSlider");
var $toolTipObj = $(".tooltip");
var volRange = $("input[type='range']");
volRange.attr("value",(audioInitialVolume / 100));
var getBGImage = function(index){
var backgroundBanners = ["assets/images/banner/Backstreet-Boys.jpg","assets/images/banner/linkin_park.jpg","assets/images/banner/eminem.jpg","assets/images/banner/adele-face.jpg","assets/images/banner/bruno_mars.jpg"];
return backgroundBanners[index];
}
$sliderObj.slider({
range: "min",
min: 10,
max : 100,
value: audioInitialVolume,
start: function (event, ui) {
$toolTipObj.fadeIn('fast');
},
stop: function (event, ui) {
$toolTipObj.fadeOut('fast');
},
slide: function(eve, ui){
var value = $sliderObj.slider('value');
$toolTipObj.css('left', value).text(ui.value);
},
change: function(eve, ui){
volRange.attr("value",(ui.value / 100));
volRange.trigger("change");
}
});
$("#playlist").audioControls({
audioVolume: (audioInitialVolume / 100),
shuffled: true,
onAudioChange: function(response){
if(response.title.length > 0){
$(".titleContainer p").text(response.title);
$("body").css({
"background-image": "url(" + getBGImage(response.index) + ")",
"background-size": "cover",
"background-repeat": "no-repeat",
"background-attachment": "fixed",
"background-position": "center center"
});
}
},
onPlay: function(){
$("p.title").addClass("animated pulse");
},
onPause: function(){
$("p.title").removeClass("animated pulse");
},
onVolumeChange: function(value){
volume = $('.volume');
if (value <= 5) {
volume.css('background-position', '0 0');
} else if (value <= 25) {
volume.css('background-position', '0 -25px');
} else if (value <= 75) {
volume.css('background-position', '0 -50px');
} else {
volume.css('background-position', '0 -75px');
}
}
});
$("span.playlist").on("click", function(eve){
eve.preventDefault();
$(".playlistContainer").slideToggle("fast");
});
});
</script>
</head>
<body>
<div class="mainContainer">
<div class="twoColumn">
<div class="col-1 toolsPane">
<a href="#" title="Show/Hide Playlist" alt="Show/Hide Playlist"><span class="ctrls playlist"></span></a>
<a href="#" title="Previous Song" alt="Previous Song"><span data-attr="prevAudio" class="ctrls previous"></span></a>
<a href="#" title="Play/Pause" alt="Play/Pause"><span data-attr="playPauseAudio" class="ctrls playAudio"></span></a>
<a href="#" title="Next Song" alt="Next Song"><span data-attr="nextAudio" class="ctrls next"></span></a>
<a href="#" title="Repeat Song" alt="Repeat Song"><span data-attr="repeatSong" class="ctrls replay"></span></a>
</div>
<div id="audioPlayer" class="col-2 container">
<div class="playlistContainer">
<ul id="playlist">
<li data-src="songs/Everything But Mine.mp3">
<a href="#">
<img src="assets/images/thumbs/bsb.jpg" />
BSB - Everything But Mine
</a>
</li>
<li data-src="songs/Linkin Park - Numb.mp3">
<a href="#">
<img src="assets/images/thumbs/linkin-park.jpg" />
Linkin Park - Numb
</a>
</li>
<li data-src="songs/love-the-way-you-lie-rihanna-feat-eminem.mp3">
<a href="#">
<img src="assets/images/thumbs/eminem.jpg" />
Eminem - Love The Way You Lie(Rihanna Ft)
</a>
</li>
<li data-src="songs/rolling-in-the-deep-adele.mp3">
<a href="#">
<img src="assets/images/thumbs/adele.jpg" />
Adele - Rolling In The Deep
</a>
</li>
<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">
<a href="#">
<img src="assets/images/thumbs/bruno-mars.jpg" />
Bruno - When I Was Your Man
</a>
</li>
</ul>
</div>
<div class="progress">
<div data-attr="seekableTrack" class="seekableTrack"></div>
<div class="updateProgress"></div>
</div>
<div class="volumeControlContainer">
<span class="tooltip"></span>
<div id="volumeSlider"></div>
<span class="volume"></span>
</div>
<div class="titleContainer">
<p class="title"></p>
</div>
<input style="display:none;" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" />
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>�����������360��FireFox��Chrome��Safari��Opera�����Ρ��ѹ�������֮��. ��֧��IE8�������������</p>
<p>��Դ��<a href="http://www.lanrenzhijia.com/" target="_blank">�����ز�</a></p>
</div>
</body>
</html>
jQuery+HTML5全屏音乐播放专辑页面特效.zip （33个子文件） 
assets js 
jquery-ui.min.js 34KB jquery.audioControls.min.js 6KB jquery.js 90KB css theme-1.css 6KB normalize.css 8KB jquery-ui.css 19KB theme-2.css 4KB images 
ui-bg_glass_100_f6f6f6_1x400.png 262B audio audio_icons.png 7KB banner 
Backstreet-Boys.jpg 201KB bruno_mars.jpg 106KB adele-face.jpg 1.35MB linkin_park.jpg 131KB eminem.jpg 248KB thumbs adele.jpg 5KB bsb.jpg 11KB linkin-park.jpg 20KB bruno-mars.jpg 8KB eminem.jpg 6KB controls grey previous.png 434B volume-increase.png 946B next.png 427B volume-decrease.png 911B play.png 409B replay.png 692B pause.png 149B replay-all.png 693B playlist.png 216B volume.png 603B bg-track.png 1KB handle.png 1KB
index.html 5KB theme-2.html 3KB资源评论
