以下是 jQuery个人音乐专辑播放特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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个人音乐专辑播放特效</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>
</body>
</html>
JS代码(jquery.audioControls.min.js):
/*Developed by:Arun Kumar Sekarwww.9lessons.info*/
!function(t,e,a,i){
function s(e,a){
this.ele=e,this.obj=t(this.ele),this.uOpts=a,this.defaults=o,this.opts=t.extend({
}
,o,a),this.playlistSrc=[],this.playlist=[],this.buttonPrevious=!1,this.buttonNext=!0,this.playPauseBut=t('[data-attr="playPauseAudio"]'),this.nextBut=t('[data-attr="nextAudio"]'),this.prevBut=t('[data-attr="prevAudio"]'),this.volumeRange=t('input[data-attr="rangeVolume"]'),this.repeatAudio=t('[data-attr="repeatSong"]'),this.timer=t('[data-attr="timer"]'),this.seekTrack=t('[data-attr="seekableTrack"]'),this.shuffBut=t('[data-attr="shuffle"]'),this.pBar=t(this.opts.progress),this.playListObj=this.obj.children(this.opts.childElements),this.init()}
var n="audioControls",o={
autoPlay:!0,childElements:"li",timer:"decrement",progress:".updateProgress",buffer:!0,shuffled:!0,audioVolume:.5,loopPlaylist:!0,onPlay:null,onPause:null,onVolumeChange:null,onAudioChange:null}
;
s.prototype={
init:function(){
var e=this;
return this.playlistSrc=this.getPlaylist(),this.playlist?(this.playlist=this.playlistSrc.slice(0),this.listLen=this.playlist.length,this.shuffBut.attr("data-state",this.opts.shuffled).toggleClass(function(){
return e.getShuffleStatus()?"shuffleActive":"shuffle"}
),this._player=t("<audio />").data("audIndex",0),this._audio=this._player.get(0),void this.create()):!1}
,create:function(){
this.opts.autoPlay&&this._player.attr("autoplay",!0),this.opts.buffer&&this._player.attr("preload","auto"),this._audio.volume=this.volumeRange.val()||this.opts.audioVolume,this.shuffleState(),this.source(),0==t("audio").length&&t("body").append(this._player),this.getIndex()<=0&&(this.buttonPrevious=!1,this.prevBut.addClass("disabled")),this.attachEvents()}
,shuffleState:function(){
var t=this.getShuffleStatus();
this.playlist=t?this.shuffle():this.playlistSrc}
,getPlaylist:function(){
var e=this.playListObj.get(),a=new Array;
return e.length<=0?!1:(t.each(e,function(e,i){
a[e]=t(i).attr("data-src")}
),a)}
,getIndex:function(){
var t=this._player.data("audIndex");
return parseInt(t)}
,getAudioTimeDecrement:function(t,e){
var a,i,e=parseInt(e),s=parseInt(t),n=e-s;
return a=n%60,i=Math.floor(n/60)%60,a=10>a?"0"+a:a,i=10>i?"0"+i:i,i+":"+a}
,getAudioTimeIncrement:function(t){
var e=parseInt(t),a=parseInt(e%60),i=parseInt(e/60%60);
return timer=10>a?i+":0"+a:i+":"+a,timer}
,shuffle:function(){
var t=this.playlist.slice(0);
if(this.arrayindex=[],t.length>0)for(var e,a,i=t.length;
0!==i;
)a=Math.floor(Math.random()*i),i-=1,e=t[i],t[i]=t[a],t[a]=e;
return t}
,getShuffleStatus:function(){
return this.opts.shuffled?!0:"true"==this.shuffBut.attr("data-state")?!0:!1}
,source:function(e,a){
e=e!=i?e:this.getIndex();
var s=t("<source />"),n=this.playlist[e];
this._player.attr({
src:n,type:this.getDataType(this.playlist[e])}
),this._player.data("audIndex",e),this._player.html(s),this.onSongChange(e),a!=i&&1==a&&this.play()}
,onSongChange:function(t){
var e=this.updateActiveSong(t);
this.updatePrevNextButtons();
{
var a={
index:e,title:this.playListObj.eq(e).find("a").text(),ele:this.playListObj.eq(e)}
;
this.playListObj.eq(e).find("a").text()}
"function"==typeof this.opts.onAudioChange&&this.opts.onAudioChange.apply(this,[a])}
,getDataType:function(t){
var e=/[^\\]*\.(\w+)$/,a=t.match(e);
return a=a[1],"ogg"==a?"audio/ogg":"wav"==a?"audio/wav":"audio/mpeg"}
,updateActiveSong:function(t){
var e=this.playlistSrc.indexOf(this.playlist[t]);
return this.playListObj.removeClass("activeAudio"),this.playListObj.eq(e).addClass("activeAudio"),e}
,updatePrevNextButtons:function(){
this.getIndex()>0?(this.buttonPrevious=!0,this.prevBut.removeClass("disabled")):(this.buttonPrevious=!1,this.prevBut.addClass("disabled")),this.getIndex()<this.listLen-1?(this.buttonNext=!0,this.nextBut.removeClass("disabled")):(this.buttonNext=!1,this.nextBut.addClass("disabled"))}
,attachEvents:function(){
var e=this;
this.shuffBut.on("click",function(){
var a=t(this);
"false"==a.attr("data-state")?(a.attr("data-state","true").toggleClass("shuffle shuffleActive"),e.shuffled=!0):(a.attr("data-state","false").toggleClass("shuffleActive shuffle"),e.shuffled=!1),e.shuffleState()}
),this.playPauseBut.on("click",function(){
e._audio.paused?e.play():e.pause()}
),t(this._audio).on("play",function(){
e.playPauseBut.removeClass("pauseAudio").addClass("playAudio"),"function"==typeof e.opts.onPlay&&e.opts.onPlay.apply(this,[e.playPauseBut])}
).on("pause",function(){
e.playPauseBut.removeClass("playAudio").addClass("pauseAudio"),"function"==typeof e.opts.onPause&&e.opts.onPause.apply(this,[e.playPauseBut])}
),this.nextBut.on("click",function(){
return e.buttonNext?(index=e.getIndex()+1,void e.source(index,!0)):!1}
),this.prevBut.on("click",function(){
return e.buttonPrevious?(index=e.getIndex()-1,void e.source(index,!0)):!1}
),this.playListObj.on("click",function(a){
a.preventDefault(),e.source(e.playlist.indexOf(t(this).attr("data-src")),!0)}
),this._player.bind("ended",function(){
if(nextIndex=e.getIndex()+1,e.seekTrack.css("width","0%"),e.listLen!=nextIndex)e.source(nextIndex,!0);
else{
if(!e.opts.loopPlaylist)return!1;
this.shuffleState(),e.source(0,!0)}
}
),t(".progress").on("click",function(a){
a.preventDefault();
var i=t(this).width(),s=a.clientX/i*100;
e._audio.currentTime=s/100*e._audio.duration}
),t(this._audio).bind("timeupdate",function(){
e.timer.text("decrement"==e.opts.timer?e.getAudioTimeDecrement(e._audio.currentTime,e._audio.duration):e.getAudioTimeIncrement(e._audio.currentTime));
var a=e._audio.currentTime/e._audio.duration*100;
t(e.opts.progress).css("width",a+"%")}
),t(this._audio).bind("durationchange progress",function(){
var t=100/(this.duration||1)*(this.seekable&&this.seekable.length?this.seekable.end(0):0)+"%";
e.seekTrack.css("width",t)}
),this.volumeRange.on("change",function(a){
a.preventDefault();
var i=t(this).val();
volInPercent=100*i,"function"==typeof e.opts.onVolumeChange&&e.opts.onVolumeChange.apply(e,[volInPercent]),e._audio.volume=i}
),this.repeatAudio.on("click",function(){
t(this).data("data-loop")||t(this).data("data-loop","false");
var a=t(this).data("data-loop");
"false"==a?(t(this).addClass("loopActive").data("data-loop","true"),e._player.attr("loop",!0)):(t(this).removeClass("loopActive").data("data-loop","false"),e._player.attr("loop",!1))}
)}
,play:function(){
this._audio.play()}
,pause:function(){
this._audio.pause()}
}
,t.fn[n]=function(e){
return this.each(function(){
t.data(this,"plugin_"+n)||t.data(this,"plugin_"+n,new s(this,e))}
)}
}
(jQuery,window,document);
CSS代码(normalize.css):
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
-ms-text-size-adjust:100%;/* 2 */
-webkit-text-size-adjust:100%;/* 2 */
}
/** * Remove default margin. */
body{margin:0;}
/* HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}
/** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome,Firefox,and Opera. */
audio,canvas,progress,video{display:inline-block;/* 1 */
vertical-align:baseline;/* 2 */
}
/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11,Safari,and Firefox < 22. */
[hidden],template{display:none;}
/* Links ========================================================================== */
/** * Remove the gray background color from active links in IE 10. */
a{background-color:transparent;}
/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* Text-level semantics ========================================================================== */
/** * Address styling not present in IE 8/9/10/11,Safari,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/** * Address style set to `bolder` in Firefox 4+,Safari,and Chrome. */
b,strong{font-weight:bold;}
/** * Address styling not present in Safari and Chrome. */
dfn{font-style:italic;}
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+,Safari,and Chrome. */
h1{font-size:2em;margin:0.67em 0;}
/** * Address styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/** * Address inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9/10. */
img{border:0;}
/** * Correct overflow not hidden in IE 9/10/11. */
svg:not(:root){overflow:hidden;}
/* Grouping content ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari. */
figure{margin:1em 40px;}
/** * Address differences between Firefox and other browsers. */
hr{box-sizing:content-box;height:0;}
/** * Contain overflow in all browsers. */
pre{overflow:auto;}
/** * Address odd `em`-unit font size rendering in all browsers. */
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}
/* Forms ========================================================================== */
/** * Known limitation:by default,Chrome and Safari on OS X allow very limited * styling of `select`,unless a `border` property is set. */
/** * 1. Correct color not being inherited. * Known issue:affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+,Safari,and Chrome. */
button,input,optgroup,select,textarea{color:inherit;/* 1 */
font:inherit;/* 2 */
margin:0;/* 3 */
}
/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */
button{overflow:visible;}
/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox,IE 8/9/10/11,and Opera. * Correct `select` style inheritance in Firefox. */
button,select{text-transform:none;}
/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
cursor:pointer;/* 3 */
}
/** * Re-set default cursor for disabled elements. */
button[disabled],html input[disabled]{cursor:default;}
/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
input{line-height:normal;}
/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing,padding,or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
padding:0;/* 2 */
}
/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`,it causes the cursor style of the * decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
/* 2 */
box-sizing:content-box;}
/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/** * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
padding:0;/* 2 */
}
/** * Remove default vertical scrollbar in IE 8/9/10/11. */
textarea{overflow:auto;}
/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE:the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup{font-weight:bold;}
/* Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;}
CSS代码(theme-1.css):
*{padding:0px;margin:0px;}
body{background-image:url(../images/banner/linkin_park.jpg);background-position:center center;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;background-color:#464646;height:100%;}
.mainContainer > .twoColumn{width:100%;max-height:100%;}
.col-1{width:6%;height:100%;}
.toolsPane{background-color:black;position:absolute;opacity:0.8;}
.ctrls{width:40px;height:40px;display:block;margin:0 auto;margin-top:50%;cursor:pointer;}
.playlist{background:url(../images/controls/grey/playlist.png) no-repeat;background-size:75%;}
.playAudio{background:url(../images/controls/grey/play.png) no-repeat;background-size:75%;}
.pauseAudio{background:url(../images/controls/grey/pause.png) no-repeat;background-size:75%;}
.previous{background:url(../images/controls/grey/previous.png) no-repeat;background-size:75%;}
.next{background:url(../images/controls/grey/next.png) no-repeat;background-size:75%;}
.replay{background:url(../images/controls/grey/replay.png) no-repeat;background-size:75%;}
.replay-all{background:url(../images/controls/grey/replay-all.png) no-repeat;background-size:75%;}
.playlistContainer{position:relative;height:10%;background-color:black;opacity:0.8;margin-left:6%;}
.playlistContainer li a{font-size:0px;line-height:0px;color:transparent;}
.playlistContainer li{display:inline-block;padding:7px;}
.playlistContainer li img{width:100px;height:100px;border:1px solid white;}
.playlistContainer li img:hover,.playlistContainer li.activeAudio img{border:1px solid yellow;}
.titleContainer{position:absolute;right:0px;margin-right:5%;bottom:5%;font-size:40px;}
.titleContainer p{color:#fff;font-family:fantasy;}
.progress{margin-left:6%;clear:both;height:10px;background-color:#666666;width:93.8%;cursor:pointer;position:relative;}
.progress .updateProgress{width:0px;background-color:#cc0000;height:100%;float:left;position:relative;}
.seekableTrack{width:0%;background-color:#000;position:absolute;height:10px;z-index:0;display:block;}
.seekableTrack,.progress .updateProgress{border:1px inset #ccc;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}
/* ------- Title Animation ------ */
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(1.1);}
100%{-webkit-transform:scale(1);}
}
@keyframes pulse{0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
}
.pulse{-webkit-animation-name:pulse;animation-name:pulse;}
/* ------- EOF Title Animation ------ */
/* ------------ Volume Control ------ */
.volumeControlContainer{position:absolute;bottom:5%;left:8%;}
#volumeSlider{border-width:1px;border-style:solid;border-color:#333 #333 #777 #333;border-radius:25px;width:125px;height:10px;background:url('../images/controls/bg-track.png') repeat top left;box-shadow:inset 0 1px 5px 0px rgba(0,0,0,.5),0 1px 0 0px rgba(250,250,250,.5);}
.tooltip{position:absolute;display:none;top:-25px;width:35px;height:20px;color:#fff;text-align:center;font:10pt Tahoma,Arial,sans-serif;border-radius:3px;border:1px solid #333;-webkit-box-shadow:1px 1px 2px 0px rgba(0,0,0,.3);box-shadow:1px 1px 2px 0px rgba(0,0,0,.3);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:-moz-linear-gradient(top,rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(69,72,77,0.5)),color-stop(100%,rgba(0,0,0,0.5)));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);/* IE10+ */
background:linear-gradient(top,rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8045484d',endColorstr='#80000000',GradientType=0);/* IE6-9 */
}
.volume{content:"";display:inline-block;width:25px;height:25px;right:-30px;background:url('../images/controls/volume.png') no-repeat 0 -50px;position:absolute;margin-top:-19px;}
#volumeSlider .ui-slider-handle{position:absolute;z-index:2;width:25px;height:25px;cursor:pointer;background:url('../images/controls/handle.png') no-repeat 50% 50%;font-weight:bold;color:#1C94C4;outline:none;top:-7px;margin-left:-12px;border:none;}
#volumeSlider .ui-slider-range{background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#eaeaea 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#eaeaea));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#eaeaea 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#eaeaea 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#eaeaea 100%);/* IE10+ */
background:linear-gradient(top,#ffffff 0%,#eaeaea 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eaeaea',GradientType=0);/* IE6-9 */
position:absolute;border:0;top:0;height:100%;border-radius:25px;}
/* ------- EOF Volume Control ------- */
CSS代码(theme-2.css):
*{padding:0px;margin:0px;}
body{background-color:#999999;font-family:SourceSansPro-Regular,Helvetica,Arial,'sans-serif';font-size:14px;line-height:1.428571429;}
ul,li{list-style:none;}
.mainContainer{margin:0 auto;width:800px}
.containerPlayer,.containerSource{display:inline-block;float:left;padding:10px;margin:0px 10px;}
.snippet{width:70%;border:1px solid #ccc;border-radius:5px;min-height:280px;max-height:280px;color:#fff;background-color:#343434;margin-top:1rem;}
.snippet:nth-child(2){margin-top:2rem;}
.snippet pre{max-height:230px;padding:5px;}
.snippet h4{padding:10px;color:#343434;background-color:#00bd9b;}
/* Playlist */
#listContainer{width:310px;background-color:#fafafa;}
#listContainer ul{background-color:#fafafa;clear:both;cursor:pointer;}
#listContainer li{padding:10px;}
#listContainer li:nth-child(even){background-color:#efefef;}
#listContainer li:hover,#listContainer li:nth-child(even):hover{background-color:#00bd9b;color:#fff;}
#listContainer li a{text-decoration:none;color:#4e4f4f;}
#listContainer li.activeAudio{background-color:#00bd9b;}
/* Player Controls */
#playerContainer{width:310px;height:130px;background-color:#333333;}
.controls li:first{margin-right:10px}
.controls li{float:left;display:inline-block;width:50px;text-align:center;margin-top:8px;margin-left:10px}
.controls li a{display:inline-block;}
.playAudio,.play{background:url('../images/audio/audio_icons.png') no-repeat -2px -35px;width:32px;height:32px;margin:auto;}
.playAudio:hover{background:url('../images/audio/audio_icons.png') no-repeat -2px -3px;}
.pauseAudio{background:url('../images/audio/audio_icons.png') no-repeat -36px -35px;width:32px;height:32px;margin:auto;}
.pauseAudio:hover{background:url('../images/audio/audio_icons.png') no-repeat -36px -3px;}
.shuffle{background:url('../images/audio/audio_icons.png') no-repeat -28px -96px;width:32px;height:32px;margin:auto;}
.shuffleActive,.shuffle:hover{background:url('../images/audio/audio_icons.png') no-repeat -28px -71px;width:32px;height:32px;margin:auto;}
.left{background:url('../images/audio/audio_icons.png') no-repeat -60px -99px;width:24px;height:24px;margin:auto;margin-top:4px;opacity:0.4;}
.left:not(.disabled):hover{opacity:1;}
.left.disabled,.right.disabled{opacity:0.4;cursor:default;}
.right{background:url('../images/audio/audio_icons.png') no-repeat -88px -75px;width:24px;height:24px;margin:auto;margin-top:4px;opacity:0.4;}
.right:not(.disabled):hover{opacity:1;}
.repeat{background:url('../images/audio/audio_icons.png') no-repeat -4px -103px;width:21px;height:21px;margin:auto;margin-top:7px;}
.repeat:hover,.repeat.loopActive{background:url('../images/audio/audio_icons.png') no-repeat -4px -79px;}
.volume{width:20px;height:20px;margin-left:5px;margin-right:5px;float:left;background:url('../images/audio/audio_icons.png') no-repeat;}
.volume1{background-position:-5px -150px;}
.volume2{background-position:-5px -198px;}
.volume3{background-position:-5px -246px;}
.mute{background-position:-34px -127px;}
.progress{clear:both;height:4px;background-color:#666666;width:100%;cursor:pointer;position:relative;}
.progress .updateProgress{width:0px;background-color:#00BD9B;height:100%;float:left;position:relative;}
.volumeControl{position:relative;margin:8px auto;}
.volumeControl .updateProgress{display:inline-block;vertical-align:middle;margin-top:2px;}
input[type="range"]{-webkit-appearance:none;-moz-appearance:none;background-color:#00BD9B;height:2px;}
.audioDetails{clear:both;color:#00bd9b;font-size:12px;padding:5px;}
.audioTime{display:inline-block;text-align:right;float:right;}
.songPlay{display:inline-block;}
.seekableTrack{width:0%;background-color:#666666;height:4px;position:absolute;z-index:0;display:block;}
.seekableTrack,.progress .updateProgress{-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}
分享到QQ
分享到微博
微信扫一扫
