以下是 jQuery抽屉式图片展示效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<link type="text/css" rel="stylesheet" href="css/lrtk.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="images/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/index_slide.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max:400,//控制.extension区块的宽度
spacing:10//控制图片之间的距离
});
});
</script>
<body>
<div class="box">
<!--代码开始-->
<ul class="kwicks">
<li>
<a href="#" ><img src="images/01.gif"></a>
<div class="extension" style="background-image:url(images/star_1.gif);">
<dl>
<dt><a href="#" >Everything's Getting Older</a></dt>
<dd><a href="#" >Aidan Moffat</a></dd>
<dd>2011</dd>
</dl>
<div class="meta">
<span><a href="#" >Shoegazer</a> 评价</span>
<span>1星</span>
</div>
</div>
</li>
<li>
<a href="#" ><img src="images/02.jpg"></a>
<div class="extension" style="background-image:url(images/star_5.gif);">
<dl>
<dt><a href="#" >Minsk</a></dt>
<dd><a href="#" >Concerto for Constantine</a></dd>
<dd>2008</dd>
</dl>
<div class="meta">
<span><a href="#" >Shoegazer</a> 评价</span>
<span>5星</span>
</div>
</div>
</li>
<li>
<a href="#" ><img src="images/03.jpg"></a>
<div class="extension" style="background-image:url(images/star_2.gif);">
<dl>
<dt><a href="#" >A+E</a></dt>
<dd><a href="#" >Graham Coxon</a></dd>
<dd>2012</dd>
</dl>
<div class="meta">
<span><a href="#" >Shoegazer</a> 评价</span>
<span>2星</span>
</div>
</div>
</li>
<li>
<a href="#" ><img src="images/04.jpg"></a>
<div class="extension" style="background-image:url(images/star_4.gif);">
<dl>
<dt><a href="#" >Lullaby</a></dt>
<dd><a href="#" >James Walsh</a></dd>
<dd>2012</dd>
</dl>
<div class="meta">
<span><a href="#" >Shoegazer</a> 评价</span>
<span>4星</span>
</div>
</div>
</li>
<li>
<a href="#" ><img src="images/05.jpg"></a>
<div class="extension" style="background-image:url(images/star_3.gif);">
<dl>
<dt><a href="#" >Wreckorder</a></dt>
<dd><a href="#" >Fran Healy</a></dd>
<dd>2010</dd>
</dl>
<div class="meta">
<span><a href="#" >Shoegazer</a> 评价</span>
<span>3星</span>
</div>
</div>
</li>
</ul>
<!--代码结束-->
</div>
</body>
</html>
JS代码(index_slide.js):
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,{
def:'easeOutQuad',swing:function (x,t,b,c,d){
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
(function($){
$.fn.kwicks=function(n){
var p={
isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500}
;
var o=$.extend(p,n);
var q=(o.isVertical?'height':'width');
var r=(o.isVertical?'top':'left');
return this.each(function(){
container=$(this);
var k=container.children('li');
var l=k.eq(0).css(q).replace(/px/,'');
if(!o.max){
o.max=(l*k.size())-(o.min*(k.size()-1))}
else{
o.min=((l*k.size())-o.max)/(k.size()-1)}
if(o.isVertical){
container.css({
width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'}
)}
else{
container.css({
width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')}
)}
var m=[];
for(i=0;
i<k.size();
i++){
m[i]=[];
for(j=1;
j<k.size()-1;
j++){
if(i==j){
m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}
else{
m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}
}
}
k.each(function(i){
var h=$(this);
if(i===0){
h.css(r,'0px')}
else if(i==k.size()-1){
h.css(o.isVertical?'bottom':'right','0px')}
else{
if(o.sticky){
h.css(r,m[o.defaultKwick][i])}
else{
h.css(r,(i*l)+(i*o.spacing))}
}
if(o.sticky){
if(o.defaultKwick==i){
h.css(q,o.max+'px');
h.addClass('active')}
else{
h.css(q,o.min+'px')}
}
h.css({
margin:0,position:'absolute'}
);
h.bind(o.event,function(){
var c=[];
var d=[];
k.stop().removeClass('active');
for(j=0;
j<k.size();
j++){
c[j]=k.eq(j).css(q).replace(/px/,'');
d[j]=k.eq(j).css(r).replace(/px/,'')}
var e={
}
;
e[q]=o.max;
var f=o.max-c[i];
var g=c[i]/f;
h.addClass('active').animate(e,{
step:function(a){
var b=f!=0?a/f-g:1;
k.each(function(j){
if(j!=i){
k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}
if(j>0&&j<k.size()-1){
k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}
}
)}
,duration:o.duration,easing:o.easing}
)}
)}
);
if(!o.sticky){
container.bind("mouseleave",function(){
var c=[];
var d=[];
k.removeClass('active').stop();
for(i=0;
i<k.size();
i++){
c[i]=k.eq(i).css(q).replace(/px/,'');
d[i]=k.eq(i).css(r).replace(/px/,'')}
var e={
}
;
e[q]=l;
var f=l-c[0];
k.eq(0).animate(e,{
step:function(a){
var b=f!=0?(a-c[0])/f:1;
for(i=1;
i<k.size();
i++){
k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');
if(i<k.size()-1){
k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}
}
}
,duration:o.duration,easing:o.easing}
)}
)}
}
)}
}
)(jQuery);
CSS代码(index.css):
.container{text-align:left;position:relative;}
.kwicks{list-style:none;width:660px;color:rgb(0,0,0);padding-left:0px;position:relative;}
.kwicks li{padding:0px;width:120px;height:120px;overflow:hidden;margin-right:9px;float:left;background-color:rgb(196,220,246);}
.kwicks li.last{margin-right:0px;}
.kwicks li a{}
.kwicks li img{border:5px solid rgb(198,198,198);width:110px;height:110px;float:left;}
.kwicks li .extension{background:url("star_5.gif") no-repeat right top #3c3c3c;height:120px;}
.kwicks li dl{padding:5px 0px 0px 10px;width:230px;height:93px;overflow:hidden;margin-left:0px;}
.kwicks li dd{color:rgb(204,204,204);}
.kwicks li dt a{color:rgb(204,204,204);}
.kwicks li dt a{font-size:14px;font-weight:bold;}
.kwicks li .meta{text-align:right;color:rgb(204,204,204);padding-right:10px;}
.kwicks li .meta a{color:rgb(204,204,204);}
CSS代码(lrtk.css):
@charset "gb2312";/* ת���뱣���Ȩ��Ϣ������ͼ�� www.lanrentuku.com */
body,ul,li,p,dl,dt,dd,a,img{padding:0px;margin:0px}
body{font:normal 12px/24px '���ź�';color:#ccc;background:#444}
ul,li{list-style:none}
img{border:none}
a:link,a:visited,a:hover{color:#ccc}
.box{width:660px;margin:30px auto;}
/****/
.kwicks{width:660px;position:relative}
.kwicks li{width:120px;height:120px;overflow:hidden;margin-right:9px;float:left}
.kwicks li.last{margin-right:0px}
.kwicks li img{width:110px;height:110px;border:5px solid #c6c6c6;float:left}
.kwicks li .extension{height:120px;background:url(star_5.gif) no-repeat right top #3c3c3c;overflow:hidden}
.kwicks li dl{padding:5px 0px 0px 10px;width:230px;height:80px;overflow:hidden;margin-left:0px}
.kwicks li dd{color:#ccc}
.kwicks li dt a{color:#ccc}
.kwicks li dt a{font-size:14px;font-weight:bold}
.kwicks li .meta{text-align:right;color:#ccc;padding:5px 10px}
.kwicks li .meta a{color:#ccc}
.kwicks li .meta span{padding-left:5px;}
CSS代码(style.css):
body{margin:0px;padding:0px;}
h1{margin:0px;padding:0px;}
h2{margin:0px;padding:0px;}
h3{margin:0px;padding:0px;}
h4{margin:0px;padding:0px;}
h5{margin:0px;padding:0px;}
h6{margin:0px;padding:0px;}
hr{margin:0px;padding:0px;}
p{margin:0px;padding:0px;}
blockquote{margin:0px;padding:0px;}
dl{margin:0px;padding:0px;}
dt{margin:0px;padding:0px;}
dd{margin:0px;padding:0px;}
ul{margin:0px;padding:0px;}
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;}
pre{margin:0px;padding:0px;}
form{margin:0px;padding:0px;}
fieldset{margin:0px;padding:0px;}
legend{margin:0px;padding:0px;}
button{margin:0px;padding:0px;}
input{margin:0px;padding:0px;}
select{margin:0px;padding:0px;}
textarea{margin:0px;padding:0px;}
th{margin:0px;padding:0px;}
td{margin:0px;padding:0px;}
figure{margin:0px;padding:0px;}
body{font:12px/1.5 arial,����;color:rgb(77,77,77);letter-spacing:1px;font-size-adjust:none;font-stretch:normal;}
button{font:12px/1.5 arial,����;color:rgb(77,77,77);letter-spacing:1px;font-size-adjust:none;font-stretch:normal;}
input{font:12px/1.5 arial,����;color:rgb(77,77,77);letter-spacing:1px;font-size-adjust:none;font-stretch:normal;}
select{font:12px/1.5 arial,����;color:rgb(77,77,77);letter-spacing:1px;font-size-adjust:none;font-stretch:normal;}
textarea{font:12px/1.5 arial,����;color:rgb(77,77,77);letter-spacing:1px;font-size-adjust:none;font-stretch:normal;}
h1{font-size:100%;}
h2{font-size:100%;}
h3{font-size:100%;}
h4{font-size:100%;}
h5{font-size:100%;}
h6{font-size:100%;}
address{font-style:normal;}
cite{font-style:normal;}
dfn{font-style:normal;}
em{font-style:normal;}
var{font-style:normal;}
code{font-family:courier new,courier,monospace;}
kbd{font-family:courier new,courier,monospace;}
pre{font-family:courier new,courier,monospace;}
samp{font-family:courier new,courier,monospace;}
.small{font-size:12px;}
.big{font:24px/normal ���ź�;margin-top:50px;margin-left:100px;font-size-adjust:none;font-stretch:normal;}
ul{list-style:none;}
ol{list-style:none;}
a{color:rgb(247,176,102);text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:rgb(0,0,0);}
fieldset{border:0px currentColor;}
img{border:0px currentColor;}
button{font-size:100%;}
input{font-size:100%;}
select{font-size:100%;}
textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.fl{float:left;}
.fr{float:right;}
.clearfix::after{height:0px;clear:both;display:block;content:"\20";}
.clearfix{}
.clear{height:0px;clear:both;font-size:0px;}
.logo a{background:url("assets/logo.png?v=1") no-repeat;}
.btn{background:url("assets/component.png?v=2") no-repeat;}
.regbtn{background:url("assets/registerlogin.gif?v=1") no-repeat;}
.new{background:url("assets/new.gif?v=1") no-repeat;}
.dropdown{background:url("assets/dropdown.png?v=1") no-repeat;}
.attention-list{background:url("assets/attention.png?v=1") no-repeat;}
.col-main{width:100%;float:left;min-height:1px;}
.col-sub{float:left;}
.col-extra{float:left;}
.grid-ms .main-wrap{margin-right:268px;}
.grid-ms .col-sub{width:235px;margin-left:-235px;}
.wrap{margin:0px auto;width:906px;padding-top:32px;}
.wrap1{margin:0px auto;width:906px;padding-top:25px;}
.wrap2{margin:0px auto;width:946px;padding-top:32px;padding-left:10px;}
.wrap-set{margin:0px auto;width:820px;padding-top:32px;}
.inner-wrap{width:730px;margin-left:100px;}
.inner-wrap .talk-list .msg{width:650px;}
.inner-wrap .talk-list .msg .mix .text{width:537px;}
.btn{width:109px;height:24px;display:inline-block;cursor:pointer;}
.talk-btn:hover{background-position:0px -25px;}
.comment-btn{background-position:0px -50px;}
.comment-btn:hover{background-position:0px -75px;}
.cancel{padding:2px 5px;border:1px solid rgb(95,95,95);float:left;}
.cancel .vline{padding:0px 7px;}
.cancel .cancel-link{color:rgb(109,109,109);cursor:pointer;}
.fav-btn{background-position:0px -150px;}
.fav-btn:hover{background-position:0px -175px;}
.focus-btn{background-position:0px -100px;width:99px;}
.focus-btn:hover{background-position:0px -125px;}
.offer-btn{background-position:0px -200px;width:128px;height:31px;}
.offer-btn:hover{background-position:0px -232px;}
.regbtn{border:0px currentColor;width:236px;height:46px;text-indent:-9999em;margin-top:40px;margin-bottom:40px;display:block;cursor:pointer;}
.login-btn:hover{background-position:0px -46px;}
.reg-btn{background-position:0px -92px;margin-bottom:20px;}
.reg-btn:hover{background-position:0px -138px;}
.textarea{padding:4px 6px;border:1px solid rgb(97,124,228);width:573px;height:85px;overflow:auto;resize:vertical;}
.textnotice{color:orange;font-size:12px;margin-top:5px;margin-right:10px;}
.textsuccess{color:rgb(204,204,204);font-size:12px;margin-top:5px;margin-right:10px;}
.dropdown{width:31px;height:27px;display:inline-block;cursor:pointer;}
#expansion{background-position:0px -28px;}
.u-name{color:rgb(247,176,102);}
.album-name{color:rgb(247,176,102);}
.timestamp{color:rgb(109,109,109);}
.del{color:rgb(109,109,109);}
.forget{color:rgb(153,153,153);font-size:12px;}
.act{padding:0px 10px 0px 0px;}
.new{width:23px;height:9px;display:inline-block;}
.star-level{top:0px;right:0px;position:absolute;}
.quote{top:0px;right:0px;position:absolute;}
.entity{font-family:����;}
.preview{width:70px;height:70px;margin-top:10px;margin-left:95px;}
.loading.preview{background:url("assets/loading.gif") no-repeat 5px 28px;}
.loading.preview img{display:none;}
.header{background:url("assets/navbg.gif") repeat-x rgb(50,50,50);height:47px;}
.inner-header{margin:0px auto;width:960px;}
.logo{padding:0px 10px;float:left;}
.logo a{width:142px;height:45px;display:block;}
.nav{float:left;}
.nav li{font-size:14px;margin-left:30px;float:left;}
.nav li a{color:rgb(204,204,204);line-height:47px;}
.login li a{color:rgb(204,204,204);line-height:47px;}
.login li .vline{color:rgb(204,204,204);line-height:47px;}
.right li a{color:rgb(204,204,204);line-height:47px;}
.login{float:right;}
.right{float:right;}
.login{margin-right:50px;}
.login li{line-height:47px;margin-left:10px;float:left;}
.right li{line-height:47px;margin-left:10px;float:left;}
.right li a{position:relative;}
.right li .new{top:-8px;right:-10px;position:absolute;}
.right .droplist{line-height:0px;margin-top:10px;}
.nav-layer{padding:3px 15px;top:37px;position:absolute;background-color:rgb(88,88,88);}
.nav-layer li{margin:0px;float:none;}
.nav-layer li a{color:rgb(204,204,204);line-height:22px;display:block;}
.guild-text{font-size:16px;margin-bottom:50px;}
.title{font-size:14px;font-weight:normal;margin-bottom:20px;}
.page-nav{margin-right:5px;margin-bottom:10px;}
.page-nav li{margin-left:10px;float:left;}
.page-nav li a{color:rgb(247,176,102);}
.mod{margin-bottom:25px;}
.mod .hd{margin-bottom:10px;}
.mod .hd h3{font-size:14px;font-weight:normal;vertical-align:middle;display:inline-block;}
.mod .hd .btn{margin-left:20px;vertical-align:middle;}
.talk-list{padding-top:1px;}
.talk-list li{margin-bottom:17px;}
.talk-list .avatar{float:left;}
.talk-list .msg{float:left;}
.talk-list .avatar{width:50px;margin-right:10px;}
.talk-list .avatar img{width:50px;height:50px;}
.talk-list .msg{padding:5px 10px;width:555px;position:relative;background-color:rgb(64,64,64);}
.talk-list .msg p{line-height:22px;}
.talk-list .msg .text{letter-spacing:1px;margin-top:5px;}
.talk-list .msg .u-name{margin-right:10px;display:inline-block;}
.talk-list .msg .timestamp{margin-right:18px;display:inline-block;}
.talk-list .msg .meta .timestamp{margin-right:18px;}
.talk-list .msg .mix .text{width:445px;margin-right:23px;float:left;}
.talk-list .msg .mix .cover{padding-top:5px;float:left;}
.talk-list .msg .mix .cover img{width:70px;height:70px;}
.talk-list .meta .del{margin-right:18px;display:inline-block;}
.rec-list{padding:8px 10px;margin-bottom:10px;background-color:rgb(64,64,64);}
.rec-list li{margin-bottom:3px;}
.person-list{padding:7px 0px 7px 7px;background-color:rgb(64,64,64);}
.album-list{padding:7px 0px 7px 7px;background-color:rgb(64,64,64);}
.attention-list{padding:7px 0px 7px 7px;background-color:rgb(64,64,64);}
.person-list li{margin-right:7px;float:left;}
.person-list li.last{margin:0px;}
.album-list li.last{margin:0px;}
.person-list li img{width:50px;height:50px;display:block;}
.album-list li{margin-bottom:15px;}
.album-list .album-cover{float:left;}
.album-list .album-detail{float:left;}
.album-list .album-cover img{width:110px;height:110px;display:block;}
.album-list .album-cover{margin-right:10px;}
.album-list .album-detail{width:100px;}
.album-list .album-detail .album-name{color:rgb(204,204,204);}
.album-list dt{color:rgb(204,204,204);font-size:14px;font-weight:bold;margin-bottom:5px;}
.album-list dt a{color:rgb(204,204,204);}
dd a{color:rgb(204,204,204);}
.attention-list{height:48px;}
.attention-list li{width:73px;text-align:center;border-right-color:rgb(108,108,108);border-right-width:1px;border-right-style:solid;float:left;}
.attention-list li.last{border-right-color:currentColor;border-right-width:0px;border-right-style:none;}
.attention-list li a{color:rgb(204,204,204);font-size:17px;display:block;position:relative;}
.attention-list li span{font-size:12px;display:block;}
.attention-list li .new{top:-4px;right:10px;position:absolute;z-index:999;}
.tab-list{margin-bottom:20px;margin-left:27px;}
.tab-list li{font-size:14px;float:left;}
.tab-list li a{color:rgb(204,204,204);position:relative;}
.tab-list li a.active{color:rgb(247,176,102);font-weight:bold;}
.tab-list li .vline{margin:0px 20px;}
.tab-list li .new{top:-8px;right:-10px;position:absolute;}
body{font:12px/1.5 arial,sans-serif;color:rgb(204,204,204);word-break:break-all;word-wrap:break-word;font-size-adjust:none;font-stretch:normal;background-color:rgb(68,68,68);}
.album-page h1{font:100 22px/normal "Times New Roman";margin-bottom:10px;font-size-adjust:none;font-stretch:normal;}
.album-info{padding-bottom:25px;}
.album-info .album-cover{float:left;}
.album-info .album-detail{float:left;}
.album-info .album-cover{border:5px solid rgb(97,97,97);margin-right:15px;}
.album-info .album-cover img{width:200px;height:200px;display:block;}
.album-info .album-detail{width:400px;}
.album-info .album-detail li{line-height:22px;}
.album-info .album-detail li.star{margin-bottom:10px;}
.album-action{margin-top:20px;}
.album-action .btn{float:left;}
.album-action .feedback{padding-top:3px;float:right;}
.album-action .share{padding-top:3px;float:right;}
.album-action .feedback{color:rgb(109,109,109);}
.album-action .share{margin-right:10px;}
.album-evaluate{padding:8px 12px;width:614px;overflow:hidden;margin-bottom:30px;position:relative;word-break:break-all;word-wrap:break-word;background-color:rgb(61,61,61);}
.album-evaluate .title{width:570px;color:rgb(109,109,109);padding-bottom:4px;font-size:12px;margin-bottom:8px;border-bottom-color:rgb(71,71,71);border-bottom-width:1px;border-bottom-style:solid;}
.album-evaluate .content{letter-spacing:2px;}
.album-evaluate .content p{line-height:22px;text-indent:32px;padding-left:3px;font-size:14px;}
.album-evaluate .meta{text-align:right;margin-top:3px;}
.album-evaluate .meta a{margin-right:10px;display:inline-block;}
.sendpost{padding:0px 25px 30px;position:relative;}
.sendpost .meta{margin-top:3px;}
.sendpost .meta .fl{display:block;}
.sendpost .meta input{padding:3px 28px;font-size:14px;cursor:pointer;}
.mark{color:rgb(109,109,109);}
.mark a{color:rgb(153,153,153);}
.offer-history{padding-top:10px;}
.offer-history a{color:rgb(204,204,204);}
.offer-history .vline{padding:0px 9px 0px 10px;}
.user-info{padding-bottom:25px;}
.user-info .user-face{float:left;}
.user-info .user-detail{float:left;}
.user-info .user-face{margin-right:15px;}
.user-info .user-face img{width:150px;height:150px;}
.user-info .user-detail{width:450px;}
.user-info .user-detail .user-name{font-size:14px;font-weight:bold;margin-bottom:10px;}
.user-info .user-detail dd{color:rgb(187,186,186);line-height:22px;}
.user-info .user-detail a{color:rgb(187,186,186);}
.user-action{margin-top:20px;}
.user-action .btn{float:left;}
.user-action .msg{padding-top:3px;float:right;}
.user-action .share{padding-top:3px;float:right;}
.user-action .share{margin-right:10px;}
.user-panel{border-width:1px 0px;border-style:solid;border-color:rgb(75,75,75);padding:20px 0px 0px;margin-bottom:20px;}
.user-panel li{height:90px;}
.user-panel li.last{margin-bottom:0px;}
.user-panel .txt{width:120px;font-size:14px;margin-top:24px;float:left;}
.user-panel a{margin-right:20px;float:left;}
.user-panel img{width:70px;height:70px;display:block;}
.user-panel .more{color:rgb(204,204,204);margin-top:24px;}
.content-panel{margin-top:100px;border-bottom-color:currentColor;border-bottom-width:0px;border-bottom-style:none;}
.my-panel{margin:0px;padding:0px 0px 20px;border:0px currentColor;}
.my-info{margin-bottom:20px;}
.my-info .my-face{float:left;}
.my-info .my-detail{float:left;}
.my-info .my-face{margin-right:15px;}
.my-info .my-face img{width:50px;height:50px;}
.my-info .my-detail{width:160px;}
.my-info .my-detail dl{color:rgb(187,186,186);}
.my-info .my-detail dl a{color:rgb(187,186,186);}
.my-info .my-detail dt{font-size:14px;font-weight:bold;margin-bottom:8px;}
.my-info .my-detail dd{line-height:22px;}
.input-field{font-size:14px;margin-bottom:20px;}
.input-field span{width:90px;line-height:30px;vertical-align:middle;display:inline-block;}
.input-field .txt{padding:4px 3px 2px;width:260px;height:22px;vertical-align:middle;}
.input-field .tip{padding-left:30px;}
.input-field .error-tip{color:red;}
.input-field .left-pad{padding-left:95px;}
.input-field .login-opt{width:272px;margin-top:-10px;}
.input-field .shorter{width:90px;}
#pic_code{margin-left:30px;vertical-align:middle;display:inline-block;}
.input-field .system-btn{padding:10px 0px;width:470px;text-align:center;-webkit-appearance:normal;}
.direct{font-size:16px;margin-bottom:45px;}
.step{margin-top:20px;display:block;}
.complete-list li{font-size:14px;margin-bottom:25px;}
.complete-list .tip{padding-left:30px;}
.complete-list .mood-choose{width:560px;}
.complete-list .mood{margin:15px 10px 0px 20px;width:100px;display:inline-block;}
.complete-list .mood input{margin-right:5px;vertical-align:middle;}
.complete-list .mood label{vertical-align:middle;}
#addDemos{margin:20px 0px 50px;padding-left:20px;position:relative;}
#addDemos .input-field span{width:120px;}
#addDemos .input-field .left-pad{padding-left:120px;}
#addDemos .try{margin-right:20px;}
#addDemos #preview{width:90px;height:35px;}
#addDemos .example{padding-right:10px;font-size:12px;}
#addDemos .help{color:rgb(233,158,77);font-size:12px;}
#addDemos .stream{left:450px;bottom:0px;position:absolute;}
#recAlbum{}
#recAlbum li{padding:10px;border:1px solid rgb(76,76,76);width:415px;height:110px;margin-left:20px;float:left;position:relative;background-color:rgb(60,60,60);}
#recAlbum li dl{width:270px;float:left;}
#recAlbum li .meta{right:10px;bottom:6px;color:rgb(110,110,110);position:absolute;}
#recAlbum li .vline{padding:0px 5px;}
#commentAlbum{margin-top:10px;}
#commentAlbum textarea{height:370px;font-size:14px;}
#commentAlbum span{font-size:14px;}
#commentAlbum .meta{margin-top:15px;}
#commentAlbum .meta input{margin-right:10px;vertical-align:middle;}
#sub_form textarea{font-size:14px;}
#star{display:inline;}
#star img{padding-bottom:4px;vertical-align:middle;}
#target{font-size:14px;margin-left:20px;display:inline;}
#mask{left:0px;top:0px;width:100%;height:100%;display:none;position:absolute;z-index:9998;}
.input-field .normal-btn{padding:3px 28px;font-size:14px;vertical-align:middle;cursor:pointer;}
.input-field .radio{margin-right:5px;}
.input-field .boy{margin-right:10px;}
#intro{width:310px;height:80px;overflow:auto;vertical-align:text-top;}
.wrap-set .tab-list{margin-bottom:40px;}
.wrap-set .tab-list a{font-size:14px;}
.wrap-set .tab-list .current{color:rgb(247,176,102);font-weight:bold;}
.suc{width:200px;color:rgb(204,204,204);padding-left:10px;}
.nosuc{width:200px;color:orange;padding-left:10px;}
.setting{padding-left:70px;}
.face-tip{padding-top:10px;}
.face-uploader{margin:10px 0px;font-size:14px;}
.preview_icon{width:150px;height:150px;margin-bottom:10px;}
.loading.preview_icon{background:url("file:///C|/Users/Administrator/Desktop/����-20121215/images/assets/loading.gif") no-repeat 45px 67px;}
.loading.preview_icon img{display:none;}
.search-box{margin:0px auto 65px;width:460px;}
.search-box .tab-list{margin-bottom:10px;}
.search-box .txt{padding:3px 5px 5px;width:350px;font-size:16px;vertical-align:middle;}
.search-go{background-position:0px -264px;border:0px currentColor;width:74px;height:32px;margin-left:10px;vertical-align:middle;}
.search-go:hover{background-position:0px -297px;}
#userRet{margin:0px auto;width:640px;}
#albumRet{margin:0px auto;width:700px;}
#albumRetList li{width:350px;height:100px;}
#albumRetList li .cover{border:1px solid rgb(97,97,97);width:70px;height:70px;float:left;}
#albumRetList li dl{width:260px;margin-left:80px;}
#albumRetList li dt a{color:rgb(204,204,204);line-height:18px;font-size:13px;font-weight:bold;}
.search-ret h3{font-size:14px;font-weight:normal;margin-bottom:30px;}
.list li{float:left;}
#userRetList li{width:210px;height:80px;}
#userRetList li .avatar{width:50px;height:50px;float:left;}
#userRetList li .avatar img{width:50px;height:50px;}
#userRetList li dl{width:150px;margin-left:60px;}
#userRetList li dt a{top:-3px;color:rgb(204,204,204);line-height:18px;font-size:13px;font-weight:bold;position:relative;}
.fav-list{padding:16px 0px 6px 18px;border:1px solid rgb(76,76,76);background-color:rgb(60,60,60);}
.fav-list li{width:122px;height:122px;float:left;}
.topcover{height:126px;}
.topcover img{border:1px solid rgb(73,73,73);width:903px;height:124px;}
#indexWrap .mod{margin-bottom:40px;}
#indexWrap .mod .hd{margin-bottom:20px;}
.mod h2{background:url("assets/sprite.png") no-repeat;width:94px;height:18px;text-indent:-9999em;overflow:hidden;float:left;}
.mod .hd .fl{color:rgb(204,204,204);font-size:13px;margin-left:18px;}
#recentNew h2{background-position:0px -19px;}
#copyWriters h2{background-position:0px -38px;width:130px;}
#radioUpdate{margin-top:30px;}
#radioUpdate h2{background-position:0px -57px;}
#copyWriters li{height:90px;margin-right:33px;}
#copyWriters li.last{margin-right:0px;}
#copyWriters .avatar{width:50px;height:50px;overflow:hidden;display:block;}
#copyWriters .avatar img{width:50px;height:50px;}
#copyWriters .writer{margin:5px -10px 0px;width:70px;height:20px;text-align:center;overflow:hidden;text-overflow:ellipsis;}
#copyWriters .writer a{color:rgb(204,204,204);}
#radioUpdate .bd img{border:5px solid rgb(198,198,198);width:110px;height:110px;display:block;}
#notice .bd p{line-height:20px;}
#notice h2{background-position:0px -76px;}
#bossArea .bd li{margin-bottom:3px;}
#bossArea .bd a{color:rgb(204,204,204);}
#bossArea h2{background-position:0px -95px;width:104px;}
.grid-ms-i .main-wrap{margin-top:30px;margin-right:234px;}
.grid-ms-i .col-sub{width:180px;margin-left:-180px;}
.page-footer{background:url("assets/foot-line.gif") repeat-x left top;padding-top:15px;margin-top:20px;}
.inner-footer{margin:10px auto 45px;width:906px;position:relative;}
.inner-footer p{margin-bottom:3px;}
.inner-footer .links a{color:rgb(204,204,204);}
.inner-footer .vline{padding:0px 8px;}
.inner-footer .quotation{background:url("assets/sprite.png") no-repeat 0px -115px;top:0px;width:340px;height:68px;right:0px;line-height:21px;padding-left:33px;position:absolute;}
.links{width:500px;}
#pw-forget{padding:20px;border:5px solid rgb(198,198,198);left:50%;top:40%;width:300px;height:150px;margin-top:-100px;margin-left:-150px;display:none;position:fixed;z-index:1000;background-color:rgb(255,255,255);}
#artistAlbum{padding:0px;}
#artistAlbum li{padding:10px;border:1px solid rgb(76,76,76);width:515px;float:left;position:relative;background-color:rgb(60,60,60);}
#artistAlbum li dl{width:395px;float:left;}
#artistAlbum li .meta{right:10px;bottom:6px;color:rgb(110,110,110);position:absolute;}
#artistAlbum li .vline{padding:0px 5px;}
#artistAlbum li dl .desc{margin-top:5px;margin-bottom:3px;}