Welcome, Old Sport!

暴雪官方网站的手风琴切换效果 CSS & jQuery

by ilikecss ON 2010/12/10 7146

工作闲暇,去访问了暴雪的官方首页,发现主页一个切换效果慢好玩的,就扒下来分享给大家了,这种效果在大多数地方都用的到,一般新闻列表运用的很多。经过测试目前兼容大众浏览器。暴雪官方地址: http://us.blizzard.com/
Blizzard-Accordion

Step1. 创建HTML

<dl class="sliderbox" id="slider2">                        
    <dt class="open"><span class="date">
    Today
    </span><span class="title">TITLE01</span></dt>
    <dd>
    <div class="thumb"><a href="" onclick="window.open(this.href); return false"><img src="images/cata-launch.jpg" alt="TITLE01"></a></div>
    <div class="text">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<div>
    <a class="readmoreline" href="">
    <span class="arrow"></span>read more
    </a>
    </div>
    </div>
    </dd>                            

    <dt><span class="date">
    Dec 9, 2010
    </span><span class="title">TITLE02</span></dt>
    <dd>
    <div class="thumb"><a href=""><img src="images/101208.jpg" alt="TITLE02"></a></div>
    <div class="text">
    Text2 <a href="">Text2</a> Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
    </div>
    </dd>                            

    <dt><span class="date">
    Dec 6, 2010
    </span><span class="title">TITLE03</span></dt>
    <dd>
    <div class="thumb"><a href=""><img src="images/cat.jpg" alt="TITLE03"></a></div>
    <div class="text">
    Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3
    </div>
    </dd>                            

    <dt><span class="date">
    Dec 1, 2010
    </span><span class="title">TITLE04</span></dt>
    <dd>
    <div class="thumb"><a href="" onclick="window.open(this.href); return false"><img src="images/101206.jpg" alt="TITLE04"></a></div>
    <div class="text">
    Text4 Text4 <a href="">Text4</a> Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 <a href="">Text4</a> Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 </div>
    </dd>                            
</dl>

Step2. 创建CSS

.sliderbox { 
	width: 700px; 
	height: 375px; 
	margin: 0 auto; 
	overflow:hidden;
}
.sliderbox a { color:#01B2F1;}
.sliderbox a:hover { 
	color: #FFF; 
	text-decoration: none;
}
.sliderbox dt {
	height:32px; 
	cursor:pointer; 
	background: #333 url(../images/newsclosedbg.gif) no-repeat; 
}
.sliderbox .open { 
	font-size: 13px; 
	background: url(../images/newsopenbgtop.gif) no-repeat; 
	color: #01b2f1; 
	cursor: default;
}
.sliderbox .title {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
	font-size: 13px; 
	color: #01b2f1; 
	padding: 0 0 0 40px; 
	line-height: 30px;
}	
.sliderbox .date {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	color: #366a80; 
	float: right; 
	display: block; 
	padding: 10px 15px 0 0;
}		
.sliderbox dt:hover span { color:#FFFFFF;}	
.sliderbox .open:hover span { color:#01b2f1;}	
.sliderbox .open:hover .date { color:#366A80;}	
.sliderbox .n_thumb { 
	width: 113px; 
	height: 125px;
	float:right; 
	padding:0 0 20px 20px; 
}
.sliderbox dd {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color: #add9e8; 
	height: 160px; 
	padding: 0; 
	margin: 0; 
	background: url(../images/newsopenbgmid.jpg) no-repeat; 
	position:relative;
	overflow:hidden; 
}
.sliderbox .text { 
	padding: 0 40px 35px 40px; 
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
	font-size: 11px; 
	color: #99cee0; 
}
.sliderbox .text .readmoreline { 
	text-transform:uppercase; 
	padding: 12px 0 0 0; 
	display: block;
}
.sliderbox .text .readmoreline .arrow {
	width: 14px; 
	height: 14px; 
	background: url(../images/readmore.gif) top left no-repeat; 
	display: block; 
	float: left; 
	margin: 1px 8px 0 0; 
	font-size: 0px; 
	line-height: 0px;
}	
.sliderbox .text .readmoreline:hover .arrow { background-position: bottom left;}	
.sliderbox .text .readmoreline:hover { text-decoration: none;}	
.sliderbox .thumb { 
	cursor:pointer; 
	margin:5px 15px 10px 20px;
}
.newsarchive .thumb, .sliderbox .thumb {
	width: 113px;
	height: 125px;
	background-repeat: no-repeat;
	display: block;
	float: right;
}
.sliderbox .text .readmoreline {
	display: block;
	padding: 12px 0 0;
	text-transform: uppercase;
}

Step3. 插入jQuery和脚本包

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
5条评论
  1. Couldnt agree more with that, very attractive article

  2. #2

    Kr说道:

    如何才能實現按一下已打開的又能折疊回去呢?

    • 根据现在的写法是无法实现的,如果要做到你说的效果,js需要重新写一个式样。

  3. #3

    soundtracks说道:

    +1 ))




TOP