以下是 jquery+html5音乐播放器特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jquery+html5音乐播放器</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/skin.css" type="text/css" media="screen"/>
<link href="css/jplayer.codrops.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h2,h3,a',{
textShadow: '1px 1px 1px #000000'
});
</script>
<script type="text/javascript">
$(function() {
/**
* build the carousel for the Albums
*/
$('#mp_albums').jcarousel({
scroll : 3
}).children('li')
.bind('click',function(){
//when clicking on an album, display its info, and hide the current one
var $this = $(this);
$('#mp_content_wrapper').find('.mp_content:visible')
.hide();
$('#mp_content_wrapper')
.find('.mp_content:nth-child('+ parseInt($this.index()+1) +')')
.fadeIn(1000);
});
/**** The Player ****/
// Local copy of jQuery selectors, for performance.
var jpPlayTime = $("#jplayer_play_time");
var jpTotalTime = $("#jplayer_total_time");
var $list = $("#jplayer_playlist ul");
/**
* Innitialize the Player
* (see jPlayer documentation for other options)
*/
$("#jquery_jplayer").jPlayer({
oggSupport : true,
preload :"auto"
})
.jPlayer("onProgressChange",
function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTime.text($.jPlayer.convertTime(playedTime));
jpTotalTime.text($.jPlayer.convertTime(totalTime));
})
.jPlayer("onSoundComplete", function() {
playListNext();
});
/**
* click previous button, plays previous song
*/
$("#jplayer_previous").bind('click', function(){
playListPrev();
$(this).blur();
return false;
});
/**
* click next button, plays next song
*/
$("#jplayer_next").bind('click', function() {
playListNext();
$(this).blur();
return false;
});
/**
* plays song in position i of the list of songs (playlist)
*/
function playSong(i){
var $next_song = $list.find('li:nth-child('+ i +')');
var mp3 = $next_song.find('.mp_mp3').html();
var ogg = $next_song.find('.mp_ogg').html();
$list.find('.jplayer_playlist_current').removeClass("jplayer_playlist_current");
$next_song.find('a').addClass("jplayer_playlist_current");
$("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
}
/**
* plays the next song in the playlist
*/
function playListNext() {
var $list_nmb_elems = $list.children().length;
var $curr = $list.find('.jplayer_playlist_current');
var idx = $curr.parent().index();
var index = (idx < $list_nmb_elems-1) ? idx+1 : 0;
playSong(index+1);
}
/**
* plays the previous song in the playlist
*/
function playListPrev() {
var $list_nmb_elems = $list.children().length;
var $curr = $list.find('.jplayer_playlist_current');
var idx = $curr.parent().index();
var index = (idx-1 >= 0) ? idx-1 : $list_nmb_elems-1;
playSong(index+1);
}
/**
* User clicks the play icon on one of the songs listed for an Album.
* Adds it to the Playlist, and plays it
*/
function addFirst(song_idx,name,mp3,ogg) {
$list.empty();
/**
* each song element in the playlist has:
* - span for the close / remove action
* - the mp3 path
* - the ogg path
*/
var song_html = "<a href='#' class='jplayer_playlist_current' tabindex='1'>" + name + "</a>";
song_html += "<span></span>";
song_html += "<div class='mp_mp3' style='display:none;'>"+mp3+"</div>";
song_html += "<div class='mp_ogg' style='display:none;'>"+ogg+"</div>";
var $listItem = $("<li/>",{
id : song_idx,
className : 'jplayer_playlist_current',
html : song_html
});
$list.append($listItem);
//event to play the song when User clicks on it
$listItem.find('a').bind('click',clickSong);
//event to remove the song from the playlist when User clicks the remove button
$listItem.find('span').bind('click',removeSong);
//start playing it
$("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
jpTotalTime.show();
jpPlayTime.show();
}
/**
* adds a song to the playlist, if not there already.
* if it is the only one, start playing it
*/
function addToPlayList(song_idx,name,mp3,ogg) {
var $list_nmb_elems = $list.children().length;
//if already in the list return
if($list.find('#'+song_idx).length)
return;
//class for the current song being played
var c = '';
if($list_nmb_elems == 0)
c = 'jplayer_playlist_current';
var song_html = "<a href='#' class="+c+" tabindex='1'>" + name + "</a>";
song_html += "<span></span>";
song_html += "<div class='mp_mp3' style='display:none;'>"+mp3+"</div>";
song_html += "<div class='mp_ogg' style='display:none;'>"+ogg+"</div>";
var $listItem = $("<li/>",{
id : song_idx,
html : song_html
});
$list.append($listItem);
//if its the only song play it
if($list_nmb_elems == 0){
$("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
jpTotalTime.show();
jpPlayTime.show();
}
$listItem.find('a').bind('click',clickSong);
$listItem.find('span').bind('click',removeSong);
}
/**
* removes a song from the playlist.
* if the song was the current one, and there are more songs
* in the playlist, then plays the next one.
* if there are no more, stops the player, and removes the status bar
* otherwise keeps playing whatever song was being played
*/
function removeSong() {
var $this = $(this);
var current = $this.parent().find('a.jplayer_playlist_current').length;
$this.parent().remove();
var $list_nmb_elems = $list.children().length;
if($list_nmb_elems > 0 && current)
playListNext();
else if($list_nmb_elems == 0){
$("#jquery_jplayer").jPlayer("clearFile");
jpTotalTime.hide();
jpPlayTime.hide();
}
return false;
}
/**
* User clicks on a song in the playlist. Plays it
*/
function clickSong() {
var index = $(this).parent().index();
playSong(index+1);
return false;
}
/**
* The next are the events for clicking on both "play" and "add to playlist" icons
*/
$('#mp_content_wrapper').find('.mp_play').bind('click',function(){
var $this = $(this);
var $paths = $this.parent().siblings('.mp_song_info');
var title = $paths.find('.mp_song_title').html();
var mp3 = $paths.find('.mp_mp3').html();
var ogg = $paths.find('.mp_ogg').html();
var album_id = $this.closest('.mp_content').attr('id');
var song_index = $this.parent().parent().index();
var song_idx = album_id + '_' + song_index;
//add to playlist and play the song
addFirst(song_idx,title,mp3,ogg);
});
$('#mp_content_wrapper').find('.mp_addpl').bind('click',function(){
var $this = $(this);
var $paths = $this.parent().siblings('.mp_song_info');
var title = $paths.find('.mp_song_title').html();
var mp3 = $paths.find('.mp_mp3').html();
var ogg = $paths.find('.mp_ogg').html();
var album_id = $this.closest('.mp_content').attr('id');
var song_index = $this.parent().parent().index();
var song_idx = album_id + '_' + song_index;
//add to playlist and play the song if none is there
addToPlayList(song_idx,title,mp3,ogg);
});
/**
* we want to show on the album image, the play button for playing the whole album
*/
$('#mp_content_wrapper').find('.mp_content').bind('mouseenter',function(){
var $this = $(this);
$this.find('.mp_playall').show();
}).bind('mouseleave',function(){
var $this = $(this);
$this.find('.mp_playall').hide();
});
/**
* to play the whole album, we play the first song and add all the others to the playlist.
* playing the first one, guarantees us that the playlist is set to empty before
*/
$('#mp_content_wrapper').find('.mp_playall').bind('click',function(){
var $this = $(this);
var $album = $this.parent();
$album.find('.mp_play:first').trigger('click');
$album.find('.mp_addpl').trigger('click');
})
/**
* playlist songs can be reordered
*/
$list.sortable();
$list.disableSelection();
});
</script>
<style>
.reference{
font-family:Arial;
position:relative;
width:100%;
font-size:12px;
text-transform:uppercase;
text-align:center;
}
.reference a{
color:#f9f9f9;
text-decoration:none;
margin-right:20px;
}
</style>
</head>
<body>
<div class="mp_wrapper">
<div id="mp_content_wrapper" class="mp_content_wrapper">
<div class="mp_content" id="c_album_1">
<img src="music/album1/album.jpg" alt="album1"/>
<a href="#" class="mp_playall">Play all</a>
<div class="mp_description">
<h2>Strings of Freedom</h2>
<p>
Recording began in 2009 and and we finally finished this album in the
end of this month. Strings of Freedom is our acoustic achievement. We dedicate
it to all our families and friends. Its about living freely and enjoy life.
</p>
</div>
<div class="mp_songs">
<div>
<h3>Our Resolve</h3>
<div class="mp_options">
<span class="mp_play">Play</span>
<span class="mp_addpl">Add to playlist</span>
</div>
<div class="mp_song_info" style="display:none;">
<span class="mp_song_title">Our Resolve</span>
<span class="mp_mp3">music/album1/ramblinglibrarian_-_Our_Resolve.mp3</span>
<span class="mp_ogg">music/album1/ramblinglibrarian_-_Our_Resolve.ogg</span>
</div>
</div>
<div>
<h3>How do I make you see</h3>
<div class="mp_options">
<span class="mp_play">Play</span>
<span class="mp_addpl">Add to playlist</span>
</div>
<div class="mp_song_info" style="display:none;">
<span class="mp_song_title">How do I make you see</span>
<span class="mp_mp3">music/album1/ramblinglibrarian_-_Rock_Version_-_How_Do_I_Make_You_See_1.mp3</span>
<span class="mp_ogg">music/album1/ramblinglibrarian_-_Rock_Version_-_How_Do_I_Make_You_See_1.ogg</span>
</div>
</div>
</div>
</div>
<div class="mp_content" id="c_album_2" style="display:none;">
<img src="music/album2/album.jpg" alt="album2"/>
<a href="#" class="mp_playall">Play all</a>
<div class="mp_description">
<h2>Time to Shine</h2>
<p>
Experimental sounds for enjoying life and music as it comes. This album was inspired by the great
Eduardo MacGregor who experimented with double sided guitars to achieve a unique sound experience.
Time to shine wants to make people shine.
</p>
</div>
<div class="mp_songs">
<div>
<h3>Bass (Drifting)</h3>
<div class="mp_options">
<span class="mp_play">Play</span>
<span class="mp_addpl">Add to playlist</span>
</div>
<div class="mp_song_info" style="display:none;">
<span class="mp_song_title">Bass (Drifting)</span>
<span class="mp_mp3">music/album2/ramblinglibrarian_-_Bass_(Drifting).mp3</span>
<span class="mp_ogg">music/album2/ramblinglibrarian_-_Bass_(Drifting).ogg</span>
</div>
</div>
<div>
<h3>Briefly us</h3>
<div class="mp_options">
<span class="mp_play">Play</span>
<span class="mp_addpl">Add to playlist</span>
</div>
<div class="mp_song_info" style="display:none;">
<span class="mp_song_title">Briefly us</span>
<span class="mp_mp3">music/album2/ramblinglibrarian_-_Briefly_Us.mp3</span>
<span class="mp_ogg">music/album2/ramblinglibrarian_-_Briefly_Us.ogg</span>
</div>
</div>
</div>
</div>
</div>
<div class="mp_player">
<div id="jquery_jplayer"></div>
<div class="jp-playlist-player">
<div class="jp-interface">
<ul class="jp-controls">
<li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
<li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
<li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" id="jplayer_next" class="jp-next" tabindex="1">next</a></li>
</ul>
<div class="jp-progress">
<div id="jplayer_load_bar" class="jp-load-bar">
<div id="jplayer_play_bar" class="jp-play-bar"></div>
</div>
</div>
<div id="jplayer_volume_bar" class="jp-volume-bar">
<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
</div>
<div id="jplayer_play_time" class="jp-play-time"></div>
<div id="jplayer_total_time" class="jp-total-time"></div>
</div>
<div id="jplayer_playlist" class="jp-playlist"><ul></ul></div>
</div>
</div>
<ul id="mp_albums" class="mp_albums jcarousel-skin">
<li><img src="music/album1/thumb.jpg" alt="album1" /></li>
<li><img src="music/album2/thumb.jpg" alt="album2" /></li>
</ul>
</div>
</body>
</html>
JS代码(ChunkFive_400.font.js):
/*! * The following copyright notice may not be removed under any circumstances. * * Copyright:* Generated in 2010 by FontLab Studio. Copyright info pending. */
Cufon.registerFont({
"w":237,"face":{
"font-family":"ChunkFive","font-weight":400,"font-stretch":"normal","units-per-em":"360","panose-1":"0 0 0 0 0 0 0 0 0 0","ascent":"270","descent":"-90","x-height":"5","bbox":"-4 -293 369 83","underline-thickness":"18","underline-position":"-18","unicode-range":"U+0020-U+007C"}
,"glyphs":{
" ":{
"w":90}
,"e":{
"d":"159,-60r31,35v-65,53,-182,46,-188,-66v-6,-105,156,-123,183,-42v4,13,8,40,0,61r-113,0v2,10,7,30,37,30v12,0,31,-2,50,-18xm101,-136v-22,0,-27,19,-28,28r54,0v0,-14,-3,-28,-26,-28","w":195}
,"f":{
"d":"148,-267r-22,41v-10,-5,-31,-9,-31,15r0,31r33,0r0,47r-33,0r0,86r22,0r0,47r-108,0r0,-47r15,0r0,-86r-15,0r0,-47r15,0v1,-53,-10,-96,71,-96v19,0,44,4,53,9","w":138}
,"g":{
"d":"9,42r19,-40v8,7,35,23,62,23v38,0,44,-19,42,-46v-5,6,-19,20,-42,20v-62,0,-86,-45,-86,-90v0,-71,73,-118,128,-78r7,-11r86,0r0,47r-22,0r0,108v0,60,-36,99,-112,99v-40,0,-68,-19,-82,-32xm80,-92v0,22,10,44,26,44v14,0,26,-18,26,-46v0,-24,-12,-43,-26,-43v-15,0,-26,18,-26,45","w":230}
,"h":{
"d":"122,-47r0,47r-113,0r0,-47r15,0r0,-176r-15,0r0,-47r87,0r0,112v4,-6,31,-28,57,-28v80,0,60,71,63,139r17,0r0,47r-93,0r0,-98v0,-12,0,-33,-21,-33v-34,0,-20,51,-23,84r26,0"}
,"i":{
"d":"110,-47r0,47r-101,0r0,-47r15,0r0,-86r-15,0r0,-47r84,0r0,133r17,0xm58,-196v-49,-2,-53,-72,0,-73v52,0,53,74,0,73","w":118}
,"j":{
"d":"46,-25r0,-108r-15,0r0,-47r83,0r0,155v0,45,-13,100,-109,100r0,-48v42,0,41,-35,41,-52xm80,-196v-49,-2,-53,-72,0,-73v52,0,53,74,0,73","w":129}
,"o":{
"d":"104,5v-51,0,-101,-32,-100,-96v0,-60,49,-93,99,-93v57,0,99,35,100,95v1,60,-44,94,-99,94xm104,-41v15,0,25,-21,25,-48v0,-27,-9,-49,-26,-49v-14,0,-25,22,-25,48v0,30,11,49,26,49","w":206}
,"u":{
"d":"5,-132r0,-48r88,0r0,87v0,31,4,45,19,45v32,0,21,-52,23,-84r-24,0r0,-48r93,0r0,132r18,0r0,48r-68,0r-10,-23v-8,9,-20,28,-51,28v-73,0,-75,-63,-72,-137r-16,0","w":227}
,"t":{
"d":"5,-133r0,-47r20,0r0,-33r66,-21r0,54r34,0r0,47r-34,0r0,64v0,12,-2,29,12,29v5,0,15,-3,22,-6r0,46v-11,4,-35,6,-43,6v-78,3,-52,-74,-57,-139r-20,0","w":130}
,"B":{
"d":"244,-73v0,98,-142,69,-235,73r0,-47r21,0r0,-158r-21,0r0,-47v84,3,222,-20,222,62v0,30,-8,45,-35,56v26,7,48,26,48,61xm104,-47v31,2,57,0,58,-31v1,-29,-27,-34,-58,-31r0,62xm151,-178v0,-27,-21,-27,-47,-26r0,54v27,2,47,-1,47,-28","w":247}
,"D":{
"d":"117,0r-108,0r0,-48r22,0r0,-156r-22,0r0,-48r110,0v87,0,137,54,137,123v0,82,-50,129,-139,129xm173,-129v0,-44,-19,-81,-68,-75r0,156v51,5,68,-31,68,-81","w":259}
,"C":{
"d":"199,-91r43,46v-24,27,-63,51,-110,51v-76,0,-127,-49,-127,-129v0,-110,112,-166,165,-108r9,-21r56,0r0,103r-64,0v-1,-23,-13,-46,-39,-46v-57,0,-58,139,10,139v30,0,54,-31,57,-35","w":246}
,"N":{
"d":"285,-252r0,47r-24,0r0,205r-77,0r-92,-137r0,91r28,0r0,46r-111,0r0,-46r21,0r0,-159r-21,0r0,-47r104,0r88,132r0,-85r-25,0r0,-47r109,0","w":293}
,"n":{
"d":"120,-47r0,47r-111,0r0,-47r15,0r0,-86r-15,0r0,-47r77,0r8,22v12,-17,28,-28,51,-28v80,0,64,70,66,139r17,0r0,47r-91,0r0,-98v0,-12,1,-34,-20,-34v-34,0,-20,51,-23,85r26,0","w":232}
,"l":{
"d":"114,-47r0,47r-105,0r0,-47r15,0r0,-177r-15,0r0,-46r84,0r0,223r21,0","w":119}
,"m":{
"d":"116,-47r0,47r-107,0r0,-47r15,0r0,-85r-15,0r0,-48r68,0r8,22v6,-7,22,-27,45,-27v36,0,48,17,54,26v11,-13,28,-26,53,-26v77,2,66,68,67,136r17,0r0,49r-91,0r0,-88v0,-17,3,-45,-14,-45v-33,0,-14,55,-19,85r22,0r0,48r-93,0r0,-92v0,-29,-1,-41,-15,-41v-30,2,-12,58,-17,86r22,0","w":326}
,"p":{
"d":"149,-88v0,-22,-10,-44,-26,-44v-14,0,-26,18,-26,46v0,24,12,43,26,43v15,0,26,-18,26,-45xm9,73r0,-47r15,0r0,-158r-15,0r0,-48r82,0r7,13v7,-5,21,-16,43,-16v56,0,85,43,85,94v0,79,-82,113,-129,79r0,36r20,0r0,47r-108,0","w":229}
,"q":{
"d":"138,-93v0,-22,-10,-44,-26,-44v-14,0,-26,18,-26,46v0,24,12,43,26,43v15,0,26,-18,26,-45xm114,83r0,-47r24,0r0,-48v-51,37,-129,0,-129,-79v0,-81,81,-113,129,-78r7,-11r84,0r0,47r-18,0r0,168r18,0r0,48r-115,0"}
,"r":{
"d":"111,-47r0,47r-102,0r0,-47r16,0r0,-86r-16,0r0,-47r68,0r11,23v9,-17,19,-32,56,-32r0,65v-49,-5,-55,30,-51,77r18,0","w":149}
,"P":{
"d":"9,-204r0,-48r117,0v84,0,99,36,99,77v-1,57,-57,77,-122,72r0,55r22,0r0,48r-116,0r0,-48r20,0r0,-156r-20,0xm154,-172v0,-28,-21,-36,-51,-33r0,63v28,2,51,-5,51,-30","w":230}
,"x":{
"d":"135,-135r0,-45r92,0r0,45r-24,0r-38,39r45,51r17,0r0,45r-115,0r0,-45r17,0r-27,-29r-26,29r23,0r0,45r-92,0r0,-45r24,0r37,-41r-45,-49r-16,0r0,-45r117,0r0,45r-17,0r25,27r27,-27r-24,0","w":233}
,"w":{
"d":"102,-55v-1,-23,16,-94,27,-125r66,0v12,32,26,99,30,125v1,-18,9,-57,16,-78r-15,0r0,-47r88,0r0,47r-15,0r-42,133r-76,0r-25,-81r-26,81r-74,0r-41,-133r-15,0r0,-47r97,0r0,47r-12,0v7,20,16,59,17,78","w":313}
,"d":{
"d":"132,-170r0,-53r-16,0r0,-47r90,0r0,223r17,0r0,47r-84,0r-7,-13v-5,4,-20,16,-45,16v-51,0,-83,-45,-83,-95v0,-76,79,-113,128,-78xm81,-92v0,22,10,44,26,44v14,0,25,-18,25,-46v0,-24,-11,-43,-25,-43v-15,0,-26,18,-26,45","w":228}
,"k":{
"d":"110,0r-96,0r0,-47r14,0r0,-176r-14,0r0,-47r83,0r0,163r42,-25r-26,0r0,-48r100,0r0,48v-25,-3,-39,6,-52,15r49,70r18,0r0,47r-107,0r0,-47r15,0r-27,-39r-13,9r0,30r14,0r0,47","w":235}
,"K":{
"d":"122,-252r0,47r-19,0r0,58r67,-58r-26,0r0,-47r120,0r0,47r-21,0r-52,45r73,113r20,0r0,47r-140,0r0,-47r24,0r-38,-61r-27,23r0,38r19,0r0,47r-113,0r0,-47r19,0r0,-158r-19,0r0,-47r113,0","w":293}
,"v":{
"d":"91,-134v12,20,22,57,28,76v1,-22,19,-56,28,-76r-19,0r0,-46r93,0r0,46r-19,0r-62,134r-56,0r-67,-134r-17,0r0,-46r109,0r0,46r-18,0","w":220}
,"y":{
"d":"114,-78r24,-56r-17,0r0,-46r91,0r0,45r-17,0r-68,166v-10,22,-26,51,-78,51v-19,0,-32,-9,-43,-18r27,-43v13,15,38,17,44,-7r5,-15r-70,-133r-15,0r0,-46r111,0r0,46r-17,0","w":208}
,"E":{
"d":"9,-204r0,-48r217,0r0,80r-62,0r0,-32r-58,0r0,50r69,0r0,47r-69,0r0,59r58,0r0,-33r62,0r0,81r-217,0r0,-48r23,0r0,-156r-23,0","w":235}
,"W":{
"d":"94,-205v8,35,15,93,23,124v5,-34,26,-126,36,-171r75,0r22,100v7,22,5,57,13,71v4,-41,15,-86,23,-124r-20,0r0,-47r103,0r0,47r-20,0r-53,205r-86,0v-12,-42,-17,-91,-32,-130v-6,46,-20,87,-30,130r-84,0r-47,-205r-21,0r0,-47r119,0r0,47r-21,0","w":365,"k":{
"a":22,"s":22,"y":11,"r":22,"u":11,"o":22,"e":22}
}
,"H":{
"d":"9,-204r0,-48r117,0r0,48r-23,0r0,54r69,0r0,-54r-22,0r0,-48r117,0r0,48r-20,0r0,156r20,0r0,48r-117,0r0,-48r22,0r0,-54r-69,0r0,54r23,0r0,48r-117,0r0,-48r20,0r0,-156r-20,0","w":276}
,"U":{
"d":"5,-205r0,-47r115,0r0,47r-20,0v0,51,-8,161,36,148v22,0,37,-9,37,-71r0,-76r-20,0r0,-48r107,0r0,47r-20,0r0,87v0,85,-35,124,-103,124v-73,0,-111,-40,-111,-122r0,-89r-21,0","w":265}
,"M":{
"d":"261,-47r-2,-141r-48,188r-76,0v-16,-65,-37,-116,-48,-188v-4,44,0,96,-1,142r21,0r0,46r-98,0r0,-46r19,0r0,-159r-19,0r0,-47r137,0r36,135r35,-135r137,0r0,47r-20,0r0,158r20,0r0,47r-114,0r0,-47r21,0","w":362}
,"@":{
"d":"67,-84v-5,-46,68,-109,108,-60r2,-14r36,5r-14,103v32,18,50,-27,50,-49v0,-54,-43,-98,-113,-98v-73,0,-104,68,-104,115v0,59,48,108,111,108v54,0,84,-26,84,-26r17,24v0,0,-37,32,-101,32v-74,0,-141,-55,-141,-138v0,-60,40,-145,134,-145v89,0,143,57,143,128v0,31,-14,84,-67,84v-19,0,-27,-7,-32,-12v-51,40,-106,8,-113,-57xm170,-102v-4,-9,-14,-24,-30,-24v-42,-1,-41,79,-8,80v10,0,20,-3,31,-9","w":280}
,"G":{
"d":"188,0r-12,-23v-8,13,-30,26,-58,26v-63,0,-113,-48,-113,-126v0,-78,55,-133,111,-133v52,0,64,24,70,30r8,-26r53,0r0,107r-64,0v-1,-29,-20,-46,-41,-46v-29,0,-49,32,-49,68v0,56,58,87,83,48r0,-15r-22,0r0,-39r120,0r0,39r-14,0r0,90r-72,0","w":279}
,"T":{
"d":"5,-252r242,0r0,94r-53,0r0,-46r-30,0r0,156r30,0r0,48r-134,0r0,-48r29,0r0,-156r-31,0r0,46r-53,0r0,-94","w":252,"k":{
"a":22,"s":22,"y":14,"r":22,"u":14,"o":22,"e":22}
}
,"R":{
"d":"9,-204r0,-48r117,0v84,0,100,34,100,75v0,28,-22,48,-52,52v25,4,47,25,47,51v0,25,13,32,17,13r0,-12r24,0v2,43,-5,77,-53,77v-47,0,-70,-25,-70,-67v0,-33,-4,-40,-36,-40r0,55r22,0r0,48r-116,0r0,-48r20,0r0,-156r-20,0xm154,-173v0,-28,-21,-34,-51,-32r0,61v28,2,51,-4,51,-29","w":265}
,"V":{
"d":"140,-124v8,18,7,36,13,43v7,-39,32,-87,46,-124r-19,0r0,-47r102,0r0,47r-18,0r-86,205r-66,0r-96,-205r-20,0r0,-47r133,0r0,47r-20,0","w":278,"k":{
"a":22,"y":22,"u":22,"o":22,"e":22}
}
,"X":{
"d":"129,-46r0,46r-120,0r0,-46r31,0r53,-69r-65,-90r-19,0r0,-47r143,0r0,47r-21,0r35,48r37,-48r-32,0r0,-47r120,0r0,47r-31,0r-54,70r65,88r21,0r0,47r-144,0r0,-47r20,0r-34,-47r-38,48r33,0","w":300}
,"s":{
"d":"73,-130v16,28,103,20,103,80v0,59,-99,70,-122,28r-4,22r-45,0r0,-65r49,0v0,19,27,24,38,24v7,0,16,-2,16,-12v0,-11,-27,-13,-53,-22v-24,-9,-48,-23,-48,-57v0,-63,95,-65,117,-24r3,-24r44,0r0,65r-47,0v0,-15,-19,-28,-37,-28v-8,0,-14,4,-14,13","w":182}
,"S":{
"d":"72,0r-63,0r0,-91r67,0v0,30,30,36,45,36v13,0,31,-3,31,-18v0,-28,-138,-16,-138,-108v0,-88,122,-101,161,-40r3,-31r62,0r0,91r-65,0v0,-27,-21,-42,-46,-42v-10,0,-25,6,-25,19v0,37,143,28,143,113v0,90,-135,93,-171,43","w":255}
,"Q":{
"d":"157,-2v-89,12,-152,-30,-152,-125v0,-73,49,-126,121,-126v124,0,153,142,94,218v1,21,23,33,23,7r0,-10r23,0v3,44,-11,75,-54,76v-30,0,-47,-19,-55,-40xm86,-108v14,-20,62,-23,83,-3v5,-43,-13,-89,-43,-89v-26,0,-47,48,-40,92xm104,-66v12,14,30,16,44,4v-2,-41,-36,-35,-44,-4","w":271}
,"z":{
"d":"56,-108r-47,0r0,-72r178,0r0,46r-85,87r37,0r0,-25r51,0r0,72r-181,0r0,-47r87,-87r-40,0r0,26","w":199}
,"Z":{
"d":"72,-157r-61,0r0,-95r236,0r1,48r-132,156r67,0r0,-46r64,0r0,94r-238,0r0,-47r131,-157r-68,0r0,47","w":257}
,"?":{
"d":"40,-172r-39,-39v42,-63,179,-67,179,27v0,59,-69,48,-57,100r-67,0r0,-29v0,-33,57,-51,57,-71v0,-14,-14,-17,-27,-17v-15,0,-34,15,-46,29xm46,-37v0,-18,15,-38,41,-38v26,0,43,17,43,38v0,20,-17,37,-43,37v-23,0,-41,-18,-41,-37","w":187}
,"F":{
"d":"9,-204r0,-48r215,0r0,80r-63,0r0,-32r-55,0r0,63r69,0r0,47r-69,0r0,46r37,0r0,48r-134,0r0,-48r22,0r0,-156r-22,0","w":229,"k":{
"a":22,"s":22,"y":11,"r":22,"u":11,"o":22,"e":22}
}
,"I":{
"d":"9,-204r0,-48r120,0r0,48r-23,0r0,156r23,0r0,48r-120,0r0,-48r23,0r0,-156r-23,0","w":137}
,"J":{
"d":"8,69r-1,-47v30,9,45,-2,46,-49r0,-177r-31,0r0,-48r136,0r0,48r-30,0v-5,127,38,304,-120,273","w":166}
,"L":{
"d":"9,-204r0,-48r114,0r0,48r-19,0r0,156r46,0r0,-46r61,0r0,94r-202,0r0,-48r20,0r0,-156r-20,0","w":219}
,"O":{
"d":"134,6v-75,0,-129,-43,-129,-133v0,-78,52,-131,127,-131v88,0,129,52,129,133v0,81,-46,131,-127,131xm134,-50v23,0,37,-30,37,-75v0,-44,-12,-78,-40,-78v-22,0,-37,31,-37,76v0,47,17,77,40,77","w":266}
,".":{
"d":"46,1v-53,0,-54,-77,0,-79v52,1,56,81,0,79","w":92}
,"a":{
"d":"28,-123r-15,-42v45,-34,175,-43,176,49r0,70r22,0r0,46r-77,0r-9,-16v-38,44,-115,24,-120,-37v-5,-56,76,-84,111,-54v9,-51,-66,-32,-88,-16xm74,-57v-1,23,37,19,42,5v0,-17,1,-24,-21,-24v-14,0,-21,8,-21,19","w":216}
,"b":{
"d":"92,0r-81,0r0,-47r15,0r0,-176r-15,0r0,-47r87,0r0,104v8,-9,29,-17,47,-17v55,0,83,46,83,94v0,75,-79,118,-130,77xm149,-88v0,-22,-10,-44,-26,-44v-14,0,-25,18,-25,46v0,24,11,43,25,43v15,0,26,-18,26,-45","w":236}
,"c":{
"d":"130,-99v-1,-17,-6,-37,-23,-37v-45,0,-42,90,5,88v19,0,32,-7,44,-20r32,36v-47,57,-188,51,-188,-59v0,-85,90,-114,134,-72r6,-17r43,0r0,81r-53,0","w":191}
,"[":{
"d":"10,-204r0,-48r117,0v84,0,99,41,99,82v0,27,-15,46,-38,59r40,64r21,0r0,47r-69,0r-60,-96r-16,0r0,48r22,0r0,48r-116,0r0,-48r21,0r0,-156r-21,0xm156,-172v0,-28,-22,-36,-52,-33r0,63v29,2,53,-5,52,-30","w":259}
,"\\":{
"d":"187,28r-51,1r-134,-300r51,0","w":188}
,"]":{
"d":"119,0r-108,0r0,-47r15,0r0,-176r-15,0r0,-47r83,0r0,163r42,-25r-26,0r0,-48r101,0r0,48v-24,-2,-39,4,-51,13r50,72r15,0r0,47r-58,0r-61,-86r-12,9r0,30r25,0r0,47","w":232}
,"Y":{
"d":"101,-206v12,21,24,45,33,68v7,-21,23,-47,33,-68r-19,0r0,-46r96,0r0,46r-19,0r-67,117r0,42r21,0r0,47r-116,0r0,-47r21,0r0,-42r-70,-117r-18,0r0,-46r124,0r0,46r-19,0","w":240,"k":{
"a":22,"s":22,"y":11,"r":22,"u":14,"o":29,"e":22}
}
,"1":{
"d":"26,-165r-17,-39v21,-10,37,-17,63,-48r64,0r0,204r34,0r0,48r-144,0r0,-48r36,0r0,-133","w":178}
,"2":{
"d":"191,-177v3,66,-86,85,-111,129r63,0r0,-29r60,0r0,77r-194,0r0,-52v20,-32,31,-42,53,-61v27,-22,63,-39,63,-61v0,-42,-63,-19,-74,4r-39,-41v45,-66,174,-61,179,34","w":212}
,"3":{
"d":"189,-75v0,92,-146,101,-184,39r37,-38v16,24,78,38,80,-4v1,-29,-28,-28,-57,-27r0,-43v27,1,57,1,57,-24v0,-41,-53,-33,-74,-7r-35,-42v13,-14,44,-35,77,-35v84,0,118,86,66,122v12,8,33,27,33,59","w":194}
,"4":{
"d":"4,-71r0,-51r103,-130r75,0r0,142r19,0r0,39r-19,0r0,23r19,0r0,48r-116,0r0,-48r22,0r0,-23r-103,0xm54,-110r53,0r0,-66","w":210}
,"5":{
"d":"202,-86v0,104,-154,114,-197,47r40,-41v19,32,88,39,90,-9v2,-37,-56,-45,-71,-18r-46,-21r22,-124r143,0r0,54r-97,0r-6,35v52,-26,122,6,122,77","w":207}
,"'":{
"d":"13,-252r71,0r-13,107r-45,0","w":98}
,",":{
"d":"39,70r-41,-24v26,-32,38,-63,34,-117r66,18v1,46,-22,90,-59,123","w":97}
,":":{
"d":"45,3v-51,0,-53,-77,0,-79v54,2,54,80,0,79xm45,-107v-50,0,-54,-76,0,-78v53,1,55,79,0,78","w":91}
,"6":{
"d":"197,-227r-25,47v-12,-7,-30,-19,-52,-19v-27,0,-44,22,-48,49v45,-39,132,-9,132,62v0,48,-34,89,-93,91v-59,2,-103,-40,-105,-112v-1,-48,11,-144,106,-147v24,-1,64,11,85,29xm110,-116v-17,0,-31,13,-37,20v0,18,11,43,34,43v37,2,46,-63,3,-63","w":209}
,"7":{
"d":"5,-180r0,-72r195,0r0,48r-97,204r-77,0r96,-204r-59,0r0,24r-58,0","w":203}
,"8":{
"d":"101,5v-96,0,-128,-101,-57,-142v-56,-40,-20,-119,59,-119v84,0,113,88,56,120v69,40,34,141,-58,141xm89,-108v-29,12,-26,63,12,62v18,0,33,-10,33,-30v0,-25,-28,-31,-45,-32xm112,-164v25,-8,20,-49,-10,-47v-14,0,-26,11,-26,23v0,20,24,24,36,24","w":201}
,"9":{
"d":"13,-25r24,-47v28,23,102,30,97,-31v-43,43,-129,7,-129,-62v0,-48,35,-89,94,-91v59,-2,105,41,107,113v1,55,-13,143,-108,146v-24,1,-64,-10,-85,-28xm99,-136v17,0,28,-14,34,-21v0,-18,-7,-42,-30,-42v-38,0,-48,63,-4,63","w":211}
,"-":{
"d":"9,-62r0,-48r104,0r0,48r-104,0","w":122}
,";
":{
"d":"62,-100v-52,-1,-55,-78,0,-80v53,1,55,81,0,80xm2,46r41,24v37,-33,60,-77,59,-123r-66,-18v4,54,-8,85,-34,117","w":108}
,"=":{
"d":"9,-62r0,-48r148,0r0,48r-148,0xm9,-141r0,-48r148,0r0,48r-148,0","w":166}
,"0":{
"d":"109,4v-60,0,-104,-42,-104,-131v0,-76,42,-129,102,-129v71,0,103,51,103,131v0,80,-36,129,-101,129xm109,-51v17,0,29,-30,29,-74v1,-91,-60,-98,-61,-2v0,46,18,76,32,76","w":215}
,"!":{
"d":"10,-37v0,-18,15,-38,41,-38v26,0,43,17,43,38v0,20,-17,37,-43,37v-23,0,-41,-18,-41,-37xm31,-93v-11,-49,-23,-96,-19,-159r86,0v4,64,-8,111,-20,159r-47,0","w":110}
,"(":{
"d":"94,-293r37,38v-17,21,-56,65,-56,143v0,80,35,124,56,149r-37,38v-39,-35,-85,-105,-85,-187v0,-85,55,-155,85,-181","w":139}
,")":{
"d":"9,-255r37,-38v30,26,85,96,85,181v0,82,-46,153,-85,188r-37,-39v21,-25,55,-69,55,-149v0,-78,-38,-122,-55,-143","w":139}
,"\"":{
"d":"13,-252r69,0r-11,107r-45,0xm100,-252r69,0r-13,107r-45,0","w":181}
,"$":{
"d":"81,-279r50,0r0,37v8,4,16,10,21,18r2,-20r53,0r0,84r-55,0v0,-25,-17,-40,-40,-40v-9,0,-22,6,-22,18v0,35,122,28,122,108v0,53,-44,69,-81,70r0,37r-50,0r0,-47v-6,-4,-13,-9,-19,-14r-4,22r-53,0r0,-87r57,0v0,29,29,35,43,35v10,0,27,-3,27,-18v0,-27,-117,-22,-117,-103v0,-48,36,-68,66,-70r0,-30","w":217}
,"%":{
"d":"257,0v-43,0,-74,-29,-74,-75v0,-44,36,-73,73,-73v47,0,74,30,74,75v0,42,-27,73,-73,73xm80,-110v-43,0,-75,-29,-75,-75v0,-44,36,-73,73,-73v47,0,74,29,74,74v0,42,-26,74,-72,74xm109,0r-41,0r156,-252r41,0xm237,-75v0,53,40,56,39,2v1,-50,-39,-56,-39,-2xm80,-143v11,0,18,-16,18,-41v1,-50,-39,-55,-39,-1v0,26,12,42,21,42","w":335}
,"\/":{
"d":"53,29r-51,-1r134,-299r51,0","w":188}
,"+":{
"d":"188,-157r0,47r-66,0r0,66r-47,0r0,-66r-66,0r0,-47r66,0r0,-66r47,0r0,66r66,0","w":196}
,"<":{
"d":"13,-122r0,-45r154,-64r18,44r-110,42r110,43r-18,44","w":197}
,">":{
"d":"185,-167r0,45r-155,63r-17,-44r110,-42r-110,-42r17,-44","w":197}
,"&":{
"d":"99,5v-103,-1,-132,-108,-42,-152v-50,-33,-24,-109,50,-109v94,0,98,93,38,114r33,33v9,-16,15,-33,19,-48r77,0r0,46r-35,0v-6,17,-13,30,-21,42v12,10,17,26,43,22r0,47r-53,0r-24,-23v-19,18,-51,28,-85,28xm71,-76v0,37,47,32,72,12v-17,-14,-29,-33,-48,-45v-10,6,-24,20,-24,33xm128,-194v0,-10,-6,-22,-21,-22v-11,0,-18,11,-18,20v0,29,39,37,39,2","w":277}
,"A":{
"d":"291,-47r0,47r-144,0r0,-47r34,0r-8,-25r-74,0r-7,25r28,0r0,47r-115,0r0,-47r25,0r48,-158r-14,0r0,-47r138,0r64,205r25,0xm136,-193r-23,78r47,0","w":296}
,"|":{
"d":"36,-252r48,0r0,325r-48,0r0,-325","w":119}
,"_":{
"d":"9,0r0,-30r234,0r0,30r-234,0","w":251}
,"*":{
"d":"136,-142r-33,25r-28,-40r-30,41r-32,-26r31,-34r-42,-15r15,-35r41,19r-5,-45r44,0r-6,46r41,-20r15,35r-44,15","w":148}
,"^":{
"d":"82,-252r52,0r77,143r-64,0r-39,-81r-40,81r-64,0","w":214}
,"#":{
"d":"25,-156r0,-49r56,0r17,-66r47,0r-17,66r48,0r17,-66r48,0r-17,66r41,0r0,49r-53,0r-11,41r44,0r0,49r-56,0r-17,66r-47,0r16,-66r-48,0r-17,66r-47,0r16,-66r-40,0r0,-49r53,0r10,-41r-43,0xm116,-156r-11,41r49,0r10,-41r-48,0","w":270}
,"\u00a0":{
"w":90}
}
}
);
JS代码(cufon-yui.js):
/* * Copyright (c) 2009 Simo Kinnunen. * Licensed under the MIT license. * * @version 1.09 */
var Cufon=(function(){
var m=function(){
return m.replace.apply(null,arguments)}
;
var x=m.DOM={
ready:(function(){
var C=false,E={
loaded:1,complete:1}
;
var B=[],D=function(){
if(C){
return}
C=true;
for(var F;
F=B.shift();
F()){
}
}
;
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",D,false);
window.addEventListener("pageshow",D,false)}
if(!window.opera&&document.readyState){
(function(){
E[document.readyState]?D():setTimeout(arguments.callee,10)}
)()}
if(document.readyState&&document.createStyleSheet){
(function(){
try{
document.body.doScroll("left");
D()}
catch(F){
setTimeout(arguments.callee,1)}
}
)()}
q(window,"load",D);
return function(F){
if(!arguments.length){
D()}
else{
C?F():B.push(F)}
}
}
)(),root:function(){
return document.documentElement||document.body}
}
;
var n=m.CSS={
Size:function(C,B){
this.value=parseFloat(C);
this.unit=String(C).match(/[a-z%]*$/)[0]||"px";
this.convert=function(D){
return D/B*this.value}
;
this.convertFrom=function(D){
return D/this.value*B}
;
this.toString=function(){
return this.value+this.unit}
}
,addClass:function(C,B){
var D=C.className;
C.className=D+(D&&" ")+B;
return C}
,color:j(function(C){
var B={
}
;
B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){
B.opacity=parseFloat(F);
return"rgb("+D+")"}
);
return B}
),fontStretch:j(function(B){
if(typeof B=="number"){
return B}
if(/%$/.test(B)){
return parseFloat(B)/100}
return{
"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}
[B]||1}
),getStyle:function(C){
var B=document.defaultView;
if(B&&B.getComputedStyle){
return new a(B.getComputedStyle(C,null))}
if(C.currentStyle){
return new a(C.currentStyle)}
return new a(C.style)}
,gradient:j(function(F){
var G={
id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]}
,C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);
for(var E=0,B=C.length,D;
E<B;
++E){
D=C[E].split("=",2).reverse();
G.stops.push([D[1]||E/(B-1),D[0]])}
return G}
),quotedList:j(function(E){
var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/
g,B;
while(B=C.exec(E)){
D.push(B[3]||B[1])}
return D}
),recognizesMedia:j(function(G){
var E=document.createElement("style"),D,C,B;
E.type="text/css";
E.media=G;
try{
E.appendChild(document.createTextNode("/**/
"))}
catch(F){
}
C=g("head")[0];
C.insertBefore(E,C.firstChild);
D=(E.sheet||E.styleSheet);
B=D&&!D.disabled;
C.removeChild(E);
return B}
),removeClass:function(D,C){
var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");
D.className=D.className.replace(B,"");
return D}
,supports:function(D,C){
var B=document.createElement("span").style;
if(B[D]===undefined){
return false}
B[D]=C;
return B[D]===C}
,textAlign:function(E,D,B,C){
if(D.get("textAlign")=="right"){
if(B>0){
E=" "+E}
}
else{
if(B<C-1){
E+=" "}
}
return E}
,textShadow:j(function(F){
if(F=="none"){
return null}
var E=[],G={
}
,B,C=0;
var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;
while(B=D.exec(F)){
if(B[0]==","){
E.push(G);
G={
}
;
C=0}
else{
if(B[1]){
G.color=B[1]}
else{
G[["offX","offY","blur"][C++]]=B[2]}
}
}
E.push(G);
return E}
),textTransform:(function(){
var B={
uppercase:function(C){
return C.toUpperCase()}
,lowercase:function(C){
return C.toLowerCase()}
,capitalize:function(C){
return C.replace(/\b./g,function(D){
return D.toUpperCase()}
)}
}
;
return function(E,D){
var C=B[D.get("textTransform")];
return C?C(E):E}
}
)(),whiteSpace:(function(){
var D={
inline:1,"inline-block":1,"run-in":1}
;
var C=/^\s+/,B=/\s+$/;
return function(H,F,G,E){
if(E){
if(E.nodeName.toLowerCase()=="br"){
H=H.replace(C,"")}
}
if(D[F.get("display")]){
return H}
if(!G.previousSibling){
H=H.replace(C,"")}
if(!G.nextSibling){
H=H.replace(B,"")}
return H}
}
)()}
;
n.ready=(function(){
var B=!n.recognizesMedia("all"),E=false;
var D=[],H=function(){
B=true;
for(var K;
K=D.shift();
K()){
}
}
;
var I=g("link"),J=g("style");
function C(K){
return K.disabled||G(K.sheet,K.media||"screen")}
function G(M,P){
if(!n.recognizesMedia(P||"all")){
return true}
if(!M||M.disabled){
return false}
try{
var Q=M.cssRules,O;
if(Q){
search:for(var L=0,K=Q.length;
O=Q[L],L<K;
++L){
switch(O.type){
case 2:break;
case 3:if(!G(O.styleSheet,O.media.mediaText)){
return false}
break;
default:break search}
}
}
}
catch(N){
}
return true}
function F(){
if(document.createStyleSheet){
return true}
var L,K;
for(K=0;
L=I[K];
++K){
if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){
return false}
}
for(K=0;
L=J[K];
++K){
if(!C(L)){
return false}
}
return true}
x.ready(function(){
if(!E){
E=n.getStyle(document.body).isUsable()}
if(B||(E&&F())){
H()}
else{
setTimeout(arguments.callee,10)}
}
);
return function(K){
if(B){
K()}
else{
D.push(K)}
}
}
)();
function s(D){
var C=this.face=D.face,B={
"\u0020":1,"\u00a0":1,"\u3000":1}
;
this.glyphs=D.glyphs;
this.w=D.w;
this.baseSize=parseInt(C["units-per-em"],10);
this.family=C["font-family"].toLowerCase();
this.weight=C["font-weight"];
this.style=C["font-style"]||"normal";
this.viewBox=(function(){
var F=C.bbox.split(/\s+/);
var E={
minX:parseInt(F[0],10),minY:parseInt(F[1],10),maxX:parseInt(F[2],10),maxY:parseInt(F[3],10)}
;
E.width=E.maxX-E.minX;
E.height=E.maxY-E.minY;
E.toString=function(){
return[this.minX,this.minY,this.width,this.height].join(" ")}
;
return E}
)();
this.ascent=-parseInt(C.ascent,10);
this.descent=-parseInt(C.descent,10);
this.height=-this.ascent+this.descent;
this.spacing=function(L,N,E){
var O=this.glyphs,M,K,G,P=[],F=0,J=-1,I=-1,H;
while(H=L[++J]){
M=O[H]||this.missingGlyph;
if(!M){
continue}
if(K){
F-=G=K[H]||0;
P[I]-=G}
F+=P[++I]=~~(M.w||this.w)+N+(B[H]?E:0);
K=M.k}
P.total=F;
return P}
}
function f(){
var C={
}
,B={
oblique:"italic",italic:"oblique"}
;
this.add=function(D){
(C[D.style]||(C[D.style]={
}
))[D.weight]=D}
;
this.get=function(H,I){
var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;
if(!G){
return null}
I={
normal:400,bold:700}
[I]||parseInt(I,10);
if(G[I]){
return G[I]}
var E={
1:1,99:0}
[I%100],K=[],F,D;
if(E===undefined){
E=I>400}
if(I==500){
I=400}
for(var J in G){
if(!k(G,J)){
continue}
J=parseInt(J,10);
if(!F||J<F){
F=J}
if(!D||J>D){
D=J}
K.push(J)}
if(I<F){
I=F}
if(I>D){
I=D}
K.sort(function(M,L){
return(E?(M>=I&&L>=I)?M<L:M>L:(M<=I&&L<=I)?M>L:M<L)?-1:1}
);
return G[K[0]]}
}
function r(){
function D(F,G){
if(F.contains){
return F.contains(G)}
return F.compareDocumentPosition(G)&16}
function B(G){
var F=G.relatedTarget;
if(!F||D(this,F)){
return}
C(this,G.type=="mouseover")}
function E(F){
C(this,F.type=="mouseenter")}
function C(F,G){
setTimeout(function(){
var H=d.get(F).options;
m.replace(F,G?h(H,H.hover):H,true)}
,10)}
this.attach=function(F){
if(F.onmouseenter===undefined){
q(F,"mouseover",B);
q(F,"mouseout",B)}
else{
q(F,"mouseenter",E);
q(F,"mouseleave",E)}
}
}
function u(){
var C=[],D={
}
;
function B(H){
var E=[],G;
for(var F=0;
G=H[F];
++F){
E[F]=C[D[G]]}
return E}
this.add=function(F,E){
D[F]=C.push(E)-1}
;
this.repeat=function(){
var E=arguments.length?B(arguments):C,F;
for(var G=0;
F=E[G++];
){
m.replace(F[0],F[1],true)}
}
}
function A(){
var D={
}
,B=0;
function C(E){
return E.cufid||(E.cufid=++B)}
this.get=function(E){
var F=C(E);
return D[F]||(D[F]={
}
)}
}
function a(B){
var D={
}
,C={
}
;
this.extend=function(E){
for(var F in E){
if(k(E,F)){
D[F]=E[F]}
}
return this}
;
this.get=function(E){
return D[E]!=undefined?D[E]:B[E]}
;
this.getSize=function(F,E){
return C[F]||(C[F]=new n.Size(this.get(F),E))}
;
this.isUsable=function(){
return !!B}
}
function q(C,B,D){
if(C.addEventListener){
C.addEventListener(B,D,false)}
else{
if(C.attachEvent){
C.attachEvent("on"+B,function(){
return D.call(C,window.event)}
)}
}
}
function v(C,B){
var D=d.get(C);
if(D.options){
return C}
if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){
b.attach(C)}
D.options=B;
return C}
function j(B){
var C={
}
;
return function(D){
if(!k(C,D)){
C[D]=B.apply(null,arguments)}
return C[D]}
}
function c(F,E){
var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;
for(var C=0;
D=B[C];
++C){
if(i[D]){
return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}
}
return null}
function g(B){
return document.getElementsByTagName(B)}
function k(C,B){
return C.hasOwnProperty(B)}
function h(){
var C={
}
,B,F;
for(var E=0,D=arguments.length;
B=arguments[E],E<D;
++E){
for(F in B){
if(k(B,F)){
C[F]=B[F]}
}
}
return C}
function o(E,M,C,N,F,D){
var K=document.createDocumentFragment(),H;
if(M===""){
return K}
var L=N.separate;
var I=M.split(p[L]),B=(L=="words");
if(B&&t){
if(/^\s/.test(M)){
I.unshift("")}
if(/\s$/.test(M)){
I.push("")}
}
for(var J=0,G=I.length;
J<G;
++J){
H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);
if(H){
K.appendChild(H)}
}
return K}
function l(D,M){
var C=D.nodeName.toLowerCase();
if(M.ignore[C]){
return}
var E=!M.textless[C];
var B=n.getStyle(v(D,M)).extend(M);
var F=c(D,B),G,K,I,H,L,J;
if(!F){
return}
for(G=D.firstChild;
G;
G=I){
K=G.nodeType;
I=G.nextSibling;
if(E&&K==3){
if(H){
H.appendData(G.data);
D.removeChild(G)}
else{
H=G}
if(I){
continue}
}
if(H){
D.replaceChild(o(F,n.whiteSpace(H.data,B,H,J),B,M,G,D),H);
H=null}
if(K==1){
if(G.firstChild){
if(G.nodeName.toLowerCase()=="cufon"){
z[M.engine](F,null,B,M,G,D)}
else{
arguments.callee(G,M)}
}
J=G}
}
}
var t=" ".split(/\s+/).length==0;
var d=new A();
var b=new r();
var y=new u();
var e=false;
var z={
}
,i={
}
,w={
autoDetect:false,engine:null,forceHitArea:false,hover:false,hoverables:{
a:true}
,ignore:{
applet:1,canvas:1,col:1,colgroup:1,head:1,iframe:1,map:1,optgroup:1,option:1,script:1,select:1,style:1,textarea:1,title:1,pre:1}
,printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){
return jQuery(B)}
)||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.YAHOO&&YAHOO.util&&YAHOO.util.Selector&&YAHOO.util.Selector.query)||(window.$$&&function(B){
return $$(B)}
)||(window.$&&function(B){
return $(B)}
)||(document.querySelectorAll&&function(B){
return document.querySelectorAll(B)}
)||g),separate:"words",textless:{
dl:1,html:1,ol:1,table:1,tbody:1,thead:1,tfoot:1,tr:1,ul:1}
,textShadow:"none"}
;
var p={
words:/\s/.test("\u00a0")?/[^\S\u00a0]+/:/\s+/,characters:"",none:/^/}
;
m.now=function(){
x.ready();
return m}
;
m.refresh=function(){
y.repeat.apply(y,arguments);
return m}
;
m.registerEngine=function(C,B){
if(!B){
return m}
z[C]=B;
return m.set("engine",C)}
;
m.registerFont=function(D){
if(!D){
return m}
var B=new s(D),C=B.family;
if(!i[C]){
i[C]=new f()}
i[C].add(B);
return m.set("fontFamily",'"'+C+'"')}
;
m.replace=function(D,C,B){
C=h(w,C);
if(!C.engine){
return m}
if(!e){
n.addClass(x.root(),"cufon-active cufon-loading");
n.ready(function(){
n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")}
);
e=true}
if(C.hover){
C.forceHitArea=true}
if(C.autoDetect){
delete C.fontFamily}
if(typeof C.textShadow=="string"){
C.textShadow=n.textShadow(C.textShadow)}
if(typeof C.color=="string"&&/^-/.test(C.color)){
C.textGradient=n.gradient(C.color)}
else{
delete C.textGradient}
if(!B){
y.add(D,arguments)}
if(D.nodeType||typeof D=="string"){
D=[D]}
n.ready(function(){
for(var F=0,E=D.length;
F<E;
++F){
var G=D[F];
if(typeof G=="string"){
m.replace(C.selector(G),C,true)}
else{
l(G,C)}
}
}
);
return m}
;
m.set=function(B,C){
w[B]=C;
return m}
;
return m}
)();
Cufon.registerEngine("canvas",(function(){
var b=document.createElement("canvas");
if(!b||!b.getContext||!b.getContext.apply){
return}
b=null;
var a=Cufon.CSS.supports("display","inline-block");
var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));
var f=document.createElement("style");
f.type="text/css";
f.appendChild(document.createTextNode(("cufon{
text-indent:0;
}
@media screen,projection{
cufon{
display:inline;
display:inline-block;
position:relative;
vertical-align:middle;
"+(e?"":"font-size:1px;
line-height:1px;
")+"}
cufon cufontext{
display:-moz-inline-box;
display:inline-block;
width:0;
height:0;
overflow:hidden;
text-indent:-10000in;
}
"+(a?"cufon canvas{
position:relative;
}
":"cufon canvas{
position:absolute;
}
")+"}
@media print{
cufon{
padding:0;
}
cufon canvas{
display:none;
}
}
").replace(/;
/g,"!important;
")));
document.getElementsByTagName("head")[0].appendChild(f);
function d(p,h){
var n=0,m=0;
var g=[],o=/([mrvxe])([^a-z]*)/g,k;
generate:for(var j=0;
k=o.exec(p);
++j){
var l=k[2].split(",");
switch(k[1]){
case"v":g[j]={
m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]}
;
break;
case"r":g[j]={
m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]}
;
break;
case"m":g[j]={
m:"moveTo",a:[n=~~l[0],m=~~l[1]]}
;
break;
case"x":g[j]={
m:"closePath"}
;
break;
case"e":break generate}
h[g[j].m].apply(h,g[j].a)}
return g}
function c(m,k){
for(var j=0,h=m.length;
j<h;
++j){
var g=m[j];
k[g.m].apply(k,g.a)}
}
return function(V,w,P,t,C,W){
var k=(w===null);
if(k){
w=C.getAttribute("alt")}
var A=V.viewBox;
var m=P.getSize("fontSize",V.baseSize);
var B=0,O=0,N=0,u=0;
var z=t.textShadow,L=[];
if(z){
for(var U=z.length;
U--;
){
var F=z[U];
var K=m.convertFrom(parseFloat(F.offX));
var I=m.convertFrom(parseFloat(F.offY));
L[U]=[K,I];
if(I<B){
B=I}
if(K>O){
O=K}
if(I>N){
N=I}
if(K<u){
u=K}
}
}
var Z=Cufon.CSS.textTransform(w,P).split("");
var E=V.spacing(Z,~~m.convertFrom(parseFloat(P.get("letterSpacing"))||0),~~m.convertFrom(parseFloat(P.get("wordSpacing"))||0));
if(!E.length){
return null}
var h=E.total;
O+=A.width-E[E.length-1];
u+=A.minX;
var s,n;
if(k){
s=C;
n=C.firstChild}
else{
s=document.createElement("cufon");
s.className="cufon cufon-canvas";
s.setAttribute("alt",w);
n=document.createElement("canvas");
s.appendChild(n);
if(t.printable){
var S=document.createElement("cufontext");
S.appendChild(document.createTextNode(w));
s.appendChild(S)}
}
var aa=s.style;
var H=n.style;
var j=m.convert(A.height);
var Y=Math.ceil(j);
var M=Y/j;
var G=M*Cufon.CSS.fontStretch(P.get("fontStretch"));
var J=h*G;
var Q=Math.ceil(m.convert(J+O-u));
var o=Math.ceil(m.convert(A.height-B+N));
n.width=Q;
n.height=o;
H.width=Q+"px";
H.height=o+"px";
B+=A.minY;
H.top=Math.round(m.convert(B-V.ascent))+"px";
H.left=Math.round(m.convert(u))+"px";
var r=Math.max(Math.ceil(m.convert(J)),0)+"px";
if(a){
aa.width=r;
aa.height=m.convert(V.height)+"px"}
else{
aa.paddingLeft=r;
aa.paddingBottom=(m.convert(V.height)-1)+"px"}
var X=n.getContext("2d"),D=j/A.height;
X.scale(D,D*M);
X.translate(-u,-B);
X.save();
function T(){
var x=V.glyphs,ab,l=-1,g=-1,y;
X.scale(G,1);
while(y=Z[++l]){
var ab=x[Z[l]]||V.missingGlyph;
if(!ab){
continue}
if(ab.d){
X.beginPath();
if(ab.code){
c(ab.code,X)}
else{
ab.code=d("m"+ab.d,X)}
X.fill()}
X.translate(E[++g],0)}
X.restore()}
if(z){
for(var U=z.length;
U--;
){
var F=z[U];
X.save();
X.fillStyle=F.color;
X.translate.apply(X,L[U]);
T()}
}
var q=t.textGradient;
if(q){
var v=q.stops,p=X.createLinearGradient(0,A.minY,0,A.maxY);
for(var U=0,R=v.length;
U<R;
++U){
p.addColorStop.apply(p,v[U])}
X.fillStyle=p}
else{
X.fillStyle=P.get("color")}
T();
return s}
}
)());
Cufon.registerEngine("vml",(function(){
var e=document.namespaces;
if(!e){
return}
e.add("cvml","urn:schemas-microsoft-com:vml");
e=null;
var b=document.createElement("cvml:shape");
b.style.behavior="url(#default#VML)";
if(!b.coordsize){
return}
b=null;
var h=(document.documentMode||0)<8;
document.write(('<style type="text/css">cufoncanvas{
text-indent:0;
}
@media screen{
cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{
behavior:url(#default#VML);
display:block;
antialias:true;
position:absolute;
}
cufoncanvas{
position:absolute;
text-align:left;
}
cufon{
display:inline-block;
position:relative;
vertical-align:'+(h?"middle":"text-bottom")+";
}
cufon cufontext{
position:absolute;
left:-10000in;
font-size:1px;
}
a cufon{
cursor:pointer}
}
@media print{
cufon cufoncanvas{
display:none;
}
}
</style>").replace(/;
/g,"!important;
"));
function c(i,j){
return a(i,/(?:em|ex|%)$|^[a-z-]+$/i.test(j)?"1em":j)}
function a(l,m){
if(m==="0"){
return 0}
if(/px$/i.test(m)){
return parseFloat(m)}
var k=l.style.left,j=l.runtimeStyle.left;
l.runtimeStyle.left=l.currentStyle.left;
l.style.left=m.replace("%","em");
var i=l.style.pixelLeft;
l.style.left=k;
l.runtimeStyle.left=j;
return i}
function f(l,k,j,n){
var i="computed"+n,m=k[i];
if(isNaN(m)){
m=k.get(n);
k[i]=m=(m=="normal")?0:~~j.convertFrom(a(l,m))}
return m}
var g={
}
;
function d(p){
var q=p.id;
if(!g[q]){
var n=p.stops,o=document.createElement("cvml:fill"),i=[];
o.type="gradient";
o.angle=180;
o.focus="0";
o.method="sigma";
o.color=n[0][1];
for(var m=1,l=n.length-1;
m<l;
++m){
i.push(n[m][0]*100+"% "+n[m][1])}
o.colors=i.join(",");
o.color2=n[l][1];
g[q]=o}
return g[q]}
return function(ac,G,Y,C,K,ad,W){
var n=(G===null);
if(n){
G=K.alt}
var I=ac.viewBox;
var p=Y.computedFontSize||(Y.computedFontSize=new Cufon.CSS.Size(c(ad,Y.get("fontSize"))+"px",ac.baseSize));
var y,q;
if(n){
y=K;
q=K.firstChild}
else{
y=document.createElement("cufon");
y.className="cufon cufon-vml";
y.alt=G;
q=document.createElement("cufoncanvas");
y.appendChild(q);
if(C.printable){
var Z=document.createElement("cufontext");
Z.appendChild(document.createTextNode(G));
y.appendChild(Z)}
if(!W){
y.appendChild(document.createElement("cvml:shape"))}
}
var ai=y.style;
var R=q.style;
var l=p.convert(I.height),af=Math.ceil(l);
var V=af/l;
var P=V*Cufon.CSS.fontStretch(Y.get("fontStretch"));
var U=I.minX,T=I.minY;
R.height=af;
R.top=Math.round(p.convert(T-ac.ascent));
R.left=Math.round(p.convert(U));
ai.height=p.convert(ac.height)+"px";
var F=Y.get("color");
var ag=Cufon.CSS.textTransform(G,Y).split("");
var L=ac.spacing(ag,f(ad,Y,p,"letterSpacing"),f(ad,Y,p,"wordSpacing"));
if(!L.length){
return null}
var k=L.total;
var x=-U+k+(I.width-L[L.length-1]);
var ah=p.convert(x*P),X=Math.round(ah);
var O=x+","+I.height,m;
var J="r"+O+"ns";
var u=C.textGradient&&d(C.textGradient);
var o=ac.glyphs,S=0;
var H=C.textShadow;
var ab=-1,aa=0,w;
while(w=ag[++ab]){
var D=o[ag[ab]]||ac.missingGlyph,v;
if(!D){
continue}
if(n){
v=q.childNodes[aa];
while(v.firstChild){
v.removeChild(v.firstChild)}
}
else{
v=document.createElement("cvml:shape");
q.appendChild(v)}
v.stroked="f";
v.coordsize=O;
v.coordorigin=m=(U-S)+","+T;
v.path=(D.d?"m"+D.d+"xe":"")+"m"+m+J;
v.fillcolor=F;
if(u){
v.appendChild(u.cloneNode(false))}
var ae=v.style;
ae.width=X;
ae.height=af;
if(H){
var s=H[0],r=H[1];
var B=Cufon.CSS.color(s.color),z;
var N=document.createElement("cvml:shadow");
N.on="t";
N.color=B.color;
N.offset=s.offX+","+s.offY;
if(r){
z=Cufon.CSS.color(r.color);
N.type="double";
N.color2=z.color;
N.offset2=r.offX+","+r.offY}
N.opacity=B.opacity||(z&&z.opacity)||1;
v.appendChild(N)}
S+=L[aa++]}
var M=v.nextSibling,t,A;
if(C.forceHitArea){
if(!M){
M=document.createElement("cvml:rect");
M.stroked="f";
M.className="cufon-vml-cover";
t=document.createElement("cvml:fill");
t.opacity=0;
M.appendChild(t);
q.appendChild(M)}
A=M.style;
A.width=X;
A.height=af}
else{
if(M){
q.removeChild(M)}
}
ai.width=Math.max(Math.ceil(p.convert(k*P)),0);
if(h){
var Q=Y.computedYAdjust;
if(Q===undefined){
var E=Y.get("lineHeight");
if(E=="normal"){
E="1em"}
else{
if(!isNaN(E)){
E+="em"}
}
Y.computedYAdjust=Q=0.5*(a(ad,E)-parseFloat(ai.height))}
if(Q){
ai.marginTop=Math.ceil(Q)+"px";
ai.marginBottom=Q+"px"}
}
return y}
}
)());
CSS代码(jplayer.codrops.css):
/* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http://www.happyworm.com/jquery/jplayer * * * Copyright (c) 2010 Happyworm Ltd * Dual licensed under the MIT and GPL licenses. * - http://www.opensource.org/licenses/mit-license.php * - http://www.gnu.org/copyleft/gpl.html*/
div.jp-single-player,div.jp-playlist-player{/* Edit the font-size to counteract inherited font sizing. * Eg. 1.25em = 1 / 0.8em */
font-size:1em;/* No parent CSS that can effect the size in these demos */
line-height:1.6;color:#666;margin-top:10px;}
div.jp-interface{position:relative;width:215px;height:60px;}
div.jp-single-player div.jp-interface{border-bottom:none;}
div.jp-interface ul.jp-controls{list-style-type:none;padding:0;margin:0;}
div.jp-interface ul.jp-controls li{position:absolute;}
div.jp-interface ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;opacity:0.9;}
div.jp-interface ul.jp-controls a:hover{opacity:1.0;}
a.jp-previous{left:4px;top:0px;width:20px;height:20px;background:url(icons/playback_prev.png) no-repeat center center;}
div.jp-playlist-player a.jp-play,div.jp-playlist-player a.jp-pause{left:24px;}
a.jp-play{background:url(icons/playback_play.png) no-repeat center center;width:20px;height:20px;}
a.jp-pause{background:url(icons/playback_pause.png) no-repeat center center;display:none;width:20px;height:20px;}
a.jp-next{left:45px;top:0px;width:20px;height:20px;background:url(icons/playback_next.png) no-repeat center center;}
a.jp-stop{top:0px;background:url(icons/playback_stop.png) no-repeat center center;width:20px;height:20px;}
div.jp-playlist-player a.jp-stop{left:72px;}
div.jp-play-time,div.jp-total-time{position:absolute;top:42px;width:200px;font-size:10px;color:#fff;}
div.jp-total-time{text-align:right;}
div.jp-playlist-player div.jp-play-time,div.jp-playlist-player div.jp-total-time{left:7px;}
div.jp-progress{position:absolute;overflow:hidden;top:25px;border:1px solid #000;width:200px;height:15px;}
div.jp-playlist-player div.jp-progress{left:7px;}
div.jp-load-bar{background:url("jplayer.codrops.png") 0 0 repeat-x;width:0px;height:15px;cursor:pointer;}
div.jp-play-bar{background:url("jplayer.codrops.png") 0 -15px repeat-x;width:0px;height:15px;}
a.jp-volume-min{top:2px;background:url(icons/sound_mute.png) no-repeat center center;width:18px;height:15px;left:100px;}
a.jp-volume-max{top:2px;background:url(icons/sound_high.png) no-repeat center center;width:18px;height:15px;left:174px;}
div.jp-volume-bar{position:absolute;overflow:hidden;top:7px;background:url("jplayer.codrops.png") 0 0px repeat-x;width:46px;height:5px;cursor:pointer;left:123px;}
div.jp-volume-bar-value{background:url("jplayer.codrops.png") 0 -30px repeat-x;width:0px;height:5px;}
div.jp-playlist{width:215px;height:435px;overflow-y:auto;overflow-x:hidden;}
div.jp-playlist ul{list-style-type:none;margin:0;padding:0;border-top:none;width:202px;font-size:10px;}
div.jp-playlist-player div.jp-playlist li{padding:3px;margin:3px 6px;background:transparent url(../images/bg.png) repeat top left;}
div.jp-playlist-player div.jp-playlist li span{width:16px;height:16px;float:right;cursor:pointer;background:url(icons/remove.png) no-repeat center center;}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_current{}
div.jp-playlist-player div.jp-playlist a{color:#ccc;text-shadow:1px 1px 1px #000;text-transform:uppercase;text-decoration:none;}
div.jp-playlist-player div.jp-playlist a:hover{color:#fff;}
div.jp-playlist-player div.jp-playlist a.jplayer_playlist_current{color:#c4000c;}
CSS代码(skin.css):
.jcarousel-skin .jcarousel-container{position:absolute;top:385px;left:0px;background:transparent url(../images/bg.png) repeat top left;-moz-border-radius:0px 0px 0px 10px;-webkit-border-bottom-left-radius:10px;border-bottom-left-radius:10px;}
.jcarousel-skin .jcarousel-container-horizontal{width:500px;padding:12px 40px;}
.jcarousel-skin .jcarousel-clip-horizontal{width:500px;height:117px;}
.jcarousel-skin .jcarousel-item{width:110px;height:117px;}
.jcarousel-skin .jcarousel-item-horizontal{margin:0px 19px 0px 0px;}
.jcarousel-skin .jcarousel-item-placeholder{background:#fff;color:#000;}
.jcarousel-skin .jcarousel-next-horizontal{position:absolute;top:60px;right:10px;width:16px;height:16px;cursor:pointer;background:transparent url(../images/br_next.png) no-repeat center center;}
.jcarousel-skin .jcarousel-prev-horizontal{position:absolute;top:60px;left:10px;width:16px;height:16px;cursor:pointer;background:transparent url(../images/br_prev.png) no-repeat center center;}
CSS代码(style.css):
*{margin:0;padding:0;}
body{background:#000 url(../images/1.jpg) repeat top left;font-family:"Myriad Pro","Trebuchet MS",Arial;font-size:12px;color:#fff;}
.mp_wrapper{width:800px;height:526px;margin:50px auto 40px auto;position:relative;}
.mp_content_wrapper{position:absolute;top:0px;left:0px;width:580px;height:380px;background:transparent url(../images/bg.png) repeat top left;-moz-border-radius:10px 0px 0px 0px;-webkit-border-top-left-radius:10px;border-top-left-radius:10px;}
.mp_player{position:absolute;top:0px;left:585px;width:215px;height:526px;background:transparent url(../images/bg.png) repeat top left;-moz-border-radius:0px 10px 10px 0px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;}
.mp_content img{width:203px;border:1px solid #000;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;margin:20px 20px 10px 20px;}
.mp_description{width:540px;height:145px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;}
.mp_description h2{font-size:34px;margin-bottom:5px;color:#f0f0f0;background:transparent url(../images/bg.png) repeat top left;padding:3px 0px 4px 10px;-moz-box-shadow:0px 0px 4px #000 inset;-webkit-box-shadow:0px 0px 4px #000 inset;box-shadow:0px 0px 4px #000 inset;}
.mp_description p{text-shadow:1px 1px 1px #000;text-transform:uppercase;padding:5px;line-height:17px;}
.mp_songs{width:320px;height:203px;position:absolute;right:20px;top:20px;}
a.mp_playall{background:#000 url(../images/play_big.png) no-repeat center center;width:50px;height:50px;position:absolute;top:98px;left:96px;text-indent:-9000px;outline:none;display:none;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.mp_songs > div{background:transparent url(../images/bg.png) repeat top left;width:100%;margin-bottom:5px;height:30px;}
.mp_songs div h3{width:260px;line-height:30px;margin-left:10px;float:left;}
.mp_options{width:48px;float:right;}
.mp_options span{text-indent:-9000px;width:20px;height:26px;margin:2px 2px 0px 0px;float:left;cursor:pointer;}
.mp_options span.mp_addpl{background:transparent url(../images/add.png) no-repeat center center;}
.mp_options span.mp_play{background:transparent url(../images/play.png) no-repeat center center;}
ul.mp_albums img{width:110px;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;cursor:pointer;margin-top:3px;}
分享到QQ
分享到微博
微信扫一扫
