以下是 jQ圆形唱片网页特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQԲ�γ�Ƭ��ҳ��Ч</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/jplayer.codrops.css" type="text/css" />
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!--<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css' />-->
</head>
<body>
<div class="cd_wrapper">
<div id="cd_background" class="cd_background">
<div class="cd_overlay"></div>
<div class="cd_loading"></div>
</div>
<h1 class="cd_title">BCO<span>Beach Chill Out</span></h1>
<div id="jquery_jplayer" class="jp-jplayer"></div>
<div id="jp-audio" class="jp-audio">
<div class="jp-type-playlist">
<div id="jp_interface" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" class="jp-next" tabindex="1">next</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<div id="jp_playlist" class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
</div>
</div>
<div id="cd_container" class="cd_container">
<div class="cd_album cd_album_1" data-bgimg="images/1.jpg">
<h1>Beach Chill Out Vol. 1</h1>
<a href="#" class="cd_back">« Go back</a>
<div class="cd_content">
<div class="cd_playlist">
<ul>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
</ul>
</div>
<div class="cd_content_inner">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
</div>
</div>
<div class="cd_album cd_album_2" data-bgimg="images/2.jpg">
<h1>Beach Chill Out Vol. 2</h1>
<a href="#" class="cd_back">« Go back</a>
<div class="cd_content">
<div class="cd_playlist">
<ul>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
</ul>
</div>
<div class="cd_content_inner">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
</div>
</div>
<div class="cd_album cd_album_3" data-bgimg="images/3.jpg">
<h1>Beach Chill Out Vol. 3</h1>
<a href="#" class="cd_back">« Go back</a>
<div class="cd_content">
<div class="cd_playlist">
<ul>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
</ul>
</div>
<div class="cd_content_inner">
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
</div>
</div>
</div>
<div class="cd_album cd_album_4" data-bgimg="images/4.jpg">
<h1>Beach Chill Out Vol. 4</h1>
<a href="#" class="cd_back">« Go back</a>
<div class="cd_content">
<div class="cd_playlist">
<ul>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
<li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Our Resolve</li>
</ul>
</div>
<div class="cd_content_inner">
<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>
<p>Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
</div>
</div>
</div>
</div>
<div id="cd_navigation" class="cd_navigation">
<a href="#" class="cd_prev">Previous</a>
<a href="#" class="cd_next">Next</a>
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<!-- the transform plugin -->
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<!-- the jPlayer plugin -->
<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
<!-- the playlist script (jPlayer demo code with some few changes) -->
<script type="text/javascript" src="js/playlist.js"></script>
<!-- the main script -->
<script type="text/javascript" src="js/jquery.template.js"></script>
</body>
</html>
JS代码(jquery.template.js):
$(function(){
//main albums wrappervar $cdContainer= $('#cd_container'),//all the albums (cd_album containers)$albums= $cdContainer.children('.cd_album'),//total number of albumstotalAlbums= $albums.length,//the navigation for the albums$cd_navigation= $('#cd_navigation'),$cd_prev= $cd_navigation.children('.cd_prev').hide(),$cd_next= $cd_navigation.children('.cd_next').hide(),//current album (first one)$albumCurrent= $albums.eq(0),//where the bg image is placed$cd_background= $('#cd_background'),//loading image$loading= $cd_background.children('.cd_loading'),//the wrapper for the audio player (hidden by default)$cd_player= $('#jp-audio'),isIElt8= ($.browser.msie && $.browser.version.substr(0,1) < 9),Template= (function(){
//if we want to use bgimages for the albumsvar bgimage= true,init= function(){
$loading.show();
//show loading status image$.when(loadImages()).done(function(){
//hide the loading status image$loading.hide();
//show navigation keystoggleNav(true);
//show first album$albumCurrent.show();
//initialize the eventsinitEventsHandler();
}
);
}
,/* preloads a set of images */
loadImages= function(){
return $.Deferred(function(dfd){
var Images = new Array();
$albums.each(function(i){
var albumBGImage= $(this).data('bgimg'),albumImage= albumBGImage.replace('images','thumbs');
Images.push(albumBGImage);
Images.push(albumImage);
}
);
var total_images= Images.length,loaded= 0;
for(var i = 0;
i < total_images;
++i){
$('<img/>').load(function(){
++loaded;
if(loaded === total_images)dfd.resolve();
}
).attr('src',Images[i]);
}
}
).promise();
}
,/*initialise the jScollPane (scroll plugin) for $el*/
jScollPane= function($el){
$el.jScrollPane({
verticalDragMinHeight:40,verticalDragMaxHeight:40}
);
}
,/*initializes some events*/
initEventsHandler= function(){
/*clicking the title will open the album info and starts playing its songs.Also the bg image is changed*/
$albums.find('h1:first').bind('click',function(){
var $title= $(this);
//if the album is opened returnif($title.data('opened'))return false;
var $album= $title.parent();
showAlbum($album);
//controls if the album is already opened$title.data('opened',true);
return false;
}
);
/* navigates to the next album. If last shows first */
$cd_next.bind('click',function(){
navigate(1);
return false;
}
);
/* navigates to the previous album. If first shows last */
$cd_prev.bind('click',function(){
navigate(0);
return false;
}
);
}
,/*shows the next or previous album.if are not using a real browser,we will see the current album rotating before the next / prev is shown*/
navigate= function(dir){
//if animated returnif($albumCurrent.is(':animated'))return false;
//we will animate the opacity..var animParam={
opacity:0}
;
if (!isIElt8){
//..and the rotationif(dir)animParam.rotate= '360deg';
elseanimParam.rotate= '-360deg';
$albumCurrent.stop().animate(animParam,1000,function(){
//after the animation reset the rotation and the opacity,//and hide the album$(this).transform({
'rotate':'0deg'}
) .css('opacity',1) .hide();
}
);
}
//check which element is next / previousvar $nextEl= (dir) ? $albumCurrent.next():$albumCurrent.prev();
//if none then either the first or the last,depending on dirif($nextEl.length === 0){
$nextEl = (dir) ? $albums.eq(0):$albums.eq(totalAlbums - 1);
}
//new album fades in$nextEl.fadeIn(1000,function(){
$albumCurrent= $(this);
}
);
//special case for the special browserif (isIElt8)$albumCurrent.fadeOut(1000);
}
,/*opens the album:shows some description (where we use the jScollPane scroll);
> shows a back button to close the album;
> slides the title to the left;
> starts playing the albums songs;
*/
showAlbum= function($album){
var $cd_back= $album.find('.cd_back'),$cd_content= $album.find('.cd_content'),$cd_content_inner= $album.find('.cd_content_inner'),$title= $album.find('h1:first'),$playlist= $album.find('div.cd_playlist > ul');
$albumCurrent= $album;
//slides the title to the left$title.stop().animate({
left:- ($title.width() + 50) + 'px'}
,400);
//this removes the inner image of the album$album.removeClass('cd_album_' + ($album.index() + 1));
//shows the album content wrapper and applies//the jScollPane scoll to the description container$cd_content.show();
jScollPane($cd_content_inner);
//hides navigation buttonstoggleNav(false);
if(bgimage){
//which bg image to show to this album?var source= $album.data('bgimg');
//change bg imagechangeBGImage(source);
}
var audioPlaylist = startPlaylist($playlist);
//when clicking the back button//we reverse this actions$cd_back.show().unbind('click').bind('click',function(e){
//titles slides to the original position$title.stop().animate({
left:'10px'}
,400);
//hide back button$cd_back.hide();
//hide player wrapper$cd_player.hide();
//show album image$album.addClass('cd_album_' + ($album.index() + 1));
//hide content wrapper$cd_content.hide();
//show navigation keystoggleNav(true);
//remove the background imageif(bgimage)removeBGImage();
//stop the playeraudioPlaylist.playlistDestroy();
//close the album$title.data('opened',false);
return false;
}
);
}
,/*hide / show navigation buttons*/
toggleNav= function(visible){
(visible) ? showNav():hideNav();
}
,/*show navigation buttons*/
showNav= function(){
$cd_prev.show();
$cd_next.show();
}
,/*hide navigation buttons*/
hideNav= function(){
$cd_prev.hide();
$cd_next.hide();
}
,/*changes the background image*/
changeBGImage= function(img){
var $itemImage = $('<img src="'+img+'" alt="Background" class="cd_bgimage" style="display:none;
"/>');
$cd_background.prepend($itemImage);
$itemImage.fadeIn(700);
}
,/*removes the background image*/
removeBGImage= function(){
$cd_background.find('img').fadeOut(700,function(){
$(this).remove();
}
);
}
,/*starts playing the playlist for the current album*/
startPlaylist= function($playlist){
var playlist= [];
//obj holding each song's info (name | mp3 source | ogg source)$playlist.children('li').each(function(i){
var $song= $(this),songName= $song.html(),songMP3= $song.data('mp3'),songOGA= $song.data('oga'),playListSong={
name:songName,mp3:songMP3,oga:songOGA}
;
playlist.push(playListSong);
}
);
//show the player$cd_player.show();
//initialize a playlistvar audioPlaylist = new Playlist(playlist,{
ready:function(){
audioPlaylist.displayPlaylist();
//parameter is a boolean for autoplay.audioPlaylist.playlistInit(true);
}
,ended:function(){
//keep playingaudioPlaylist.playlistNext();
}
,play:function(){
$(this).jPlayer('pauseOthers');
}
,//path to the jPlayer swfswfPath:'js/jPlayer',supplied:'mp3,oga',//flash with an HTML5 fallbacksolution:'html,flash'}
);
return audioPlaylist;
}
;
return{
init:init}
;
}
)();
/*call the init method of Template*/
Template.init();
}
);
JS代码(playlist.js):
/*This basically taken from the jPlayer demos.*/
var Playlist = function(playlist,options){
var self = this;
this.playlist= playlist;
// Array of Objects:The playlistthis.options= options;
// Object:The jPlayer constructor options for this playlistthis.current = 0;
this.cssId ={
jPlayer:"jquery_jplayer",interface:"jp_interface",playlist:"jp_playlist"}
;
this.cssSelector ={
}
;
$.each(this.cssId,function(entity,id){
self.cssSelector[entity] = "#" + id;
}
);
if(!this.options.cssSelectorAncestor){
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$(this.cssSelector.jPlayer).jPlayer(this.options);
$(this.cssSelector.interface + " .jp-previous").click(function(){
self.playlistPrev();
$(this).blur();
return false;
}
);
$(this.cssSelector.interface + " .jp-next").click(function(){
self.playlistNext();
$(this).blur();
return false;
}
);
}
;
Playlist.prototype ={
displayPlaylist:function(){
var self= this,listItems= '';
for (i = 0;
i < this.playlist.length;
i++){
var listItem= '<li><a href="#" id="item_' + i + '" tabindex="1">' + this.playlist[i].name + '</a></li>';
listItems += listItem;
}
var $playlistUl = $(this.cssSelector.playlist).children('ul');
$playlistUl.empty().html(listItems);
$playlistUl.children('li:last').addClass('jp-playlist-last');
$playlistUl.children('li').bind('click',function(){
var $el= $(this);
index= $el.index();
if(self.current !== index){
self.playlistChange(index);
}
else{
$(this.cssSelector.jPlayer).jPlayer('play');
}
$el.blur();
return false;
}
);
}
,playlistInit:function(autoplay){
if(autoplay){
this.playlistChange(this.current);
}
else{
this.playlistConfig(this.current);
}
}
,playlistConfig:function(index){
$("#item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$("#item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$(this.cssSelector.jPlayer).jPlayer("setMedia",this.playlist[this.current]);
}
,playlistChange:function(index){
this.playlistConfig(index);
$(this.cssSelector.jPlayer).jPlayer("play");
}
,playlistNext:function(){
var index = (this.current + 1 < this.playlist.length) ? this.current + 1:0;
this.playlistChange(index);
}
,playlistPrev:function(){
var index = (this.current - 1 >= 0) ? this.current - 1:this.playlist.length - 1;
this.playlistChange(index);
}
,playlistDestroy:function(){
$(this.cssSelector.jPlayer).jPlayer("destroy");
}
}
;
CSS代码(reset.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
CSS代码(style.css):
@import url('reset.css');body{background:#ffc000;color:#fff;font-family:'Terminal Dosis Light',Arial,sans-serif;text-transform:uppercase;}
a{color:#fff;text-decoration:none;}
img.cd_bgimage{position:fixed;left:0px;bottom:0px;width:100%;opacity:0.7;}
.cd_overlay{width:100%;height:100%;position:fixed;top:0px;left:0px;background:transparent url(../images/pattern.png) repeat top left;}
.cd_loading{width:500px;height:500px;position:fixed;top:50%;left:50%;margin:-270px 0px 0px -270px;border:20px solid #fff;background:#fff url(../images/loader.gif) no-repeat center center;z-index:99999;opacity:0.7;border-radius:270px 270px 270px 270px;}
h1.cd_title{font-size:170px;position:fixed;top:0px;left:10px;text-shadow:0px 0px 1px #fff;}
h1.cd_title span{display:block;font-size:22px;margin:-35px 0px 0px 13px;}
.jp-audio{display:none;position:fixed;top:50%;left:50%;z-index:1000;margin:-200px 0 0 -107px;height:200px;}
.cd_playlist{display:none;}
.cd_album{width:500px;height:500px;border-radius:270px 270px 270px 270px;background-color:transparent;background-repeat:no-repeat;background-position:center center;position:fixed;top:50%;left:50%;margin:-270px 0px 0px -270px;border:20px solid #fff;display:none;}
.cd_album_1{background-image:url(../thumbs/1.jpg);}
.cd_album_2{background-image:url(../thumbs/2.jpg);}
.cd_album_3{background-image:url(../thumbs/3.jpg);}
.cd_album_4{background-image:url(../thumbs/4.jpg);}
.cd_album h1{position:absolute;top:329px;left:10px;/* left:-327px;*/
background:#fff;color:#000;font-size:30px;text-shadow:2px 2px 0px #ddd;padding:2px 30px;z-index:100;cursor:pointer;}
.cd_navigation a{width:55px;height:55px;position:fixed;left:50%;text-indent:-9000px;outline:none;opacity:0.6;z-index:999999;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-transition:all 0.5s ease-in-out;}
.cd_navigation a:hover{opacity:1.0;}
.cd_navigation a.cd_prev{background:transparent url(../images/nav_prev_rotated.png) no-repeat center center;bottom:100px;margin-left:-260px;}
.cd_navigation a.cd_next{background:transparent url(../images/nav_next_rotated.png) no-repeat center center;top:100px;margin-left:200px;}
.cd_content{width:500px;height:500px;border-radius:270px 270px 270px 270px;position:absolute;top:0px;left:0px;display:none;background:transparent url(../images/bg_content.png) repeat top left;}
.cd_content_inner{position:absolute;top:250px;left:100px;width:300px;height:160px;outline:none;overflow:hidden;background:transparent url(../images/bg_content_inner.png) repeat top left;}
.cd_content_inner p{color:#000;font-size:18px;padding:10px;text-shadow:1px 1px 0px #ffe747;}
a.cd_back{position:absolute;top:53px;right:-55px;background:#fff;color:#000;font-size:16px;text-shadow:2px 2px 0px #ddd;padding:2px 30px;z-index:100;display:none;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-transition:all 0.5s ease;}
a.cd_back:hover{color:#ffc000;}
.cd_footer{position:fixed;bottom:0px;left:0px;width:100%;font-size:13px;height:20px;padding-bottom:5px;}
.cd_footer a{padding:5px 10px;letter-spacing:1px;text-shadow:0px 0px 1px #fff;color:#fff;float:right;}
.cd_footer a:hover{color:#000;}
.cd_footer a span{font-weight:bold;}
.cd_footer a.cd_left{float:left;}
分享到QQ
分享到微博
微信扫一扫
