js手風琴插件制作slider豎直垂直手風琴點擊標題內容展開收縮



125 496 166



特效描述:手風琴插件 豎直手風琴 垂直手風琴 點擊標題內容 展開收縮,js手風琴插件制作js 縱向手風琴效果點擊標題內容切換效果,豎直垂直slider手風琴切換只展示一個內容區域。內含js代碼下載。

代碼結構

1. HTML代碼

<style type="text/css">
/*  Theme Name:Airos ChouTheme URI:http://www.sunflowamedia.com/Description:Web Design examples*/
*{margin:0;padding:0;list-style-type:none;}
body{background:#002433;font-size:12px;color:#fff;}
a,img{border:0;}
#col{width:750px;margin:50px auto 0 auto;clear:both;padding-bottom:50px;}
/* Homepage Style */
.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 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 .thumb{cursor:pointer;margin:5px 15px 10px 20px;}
.sliderbox .thumb{width:113px;height:125px;background-repeat:no-repeat;display:block;float:right;}
</style>
	<div id="col">
		<dl class="sliderbox" id="slider2">                        
			<dt><span class="date">2012-03-20</span><span class="title"><a href="http://www.dijiuzhanzhang.com/">jquery圖片特效</a></span></dt>
			<dd>
				<div class="thumb"><a href="http://www.dijiuzhanzhang.com/"><img src="images/cata-launch.jpg" alt="TITLE01"></a></div>
				<div class="text">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery flow 圖片切換滾動插件 帶分頁索引按鈕控制圖片左右滾動</a><br />
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 圖片特效插件 異步讀取圖片TOP排行榜特效</a>
				</div>
			</dd>
			<dt><span class="date">2012-03-20</span><span class="title"><a href="http://www.dijiuzhanzhang.com/">jquery圖片切換</a></span></dt>
			<dd>
				<div class="thumb"><a href="http://www.dijiuzhanzhang.com/"><img src="images/101208.jpg" alt="TITLE02"></a></div>
				<div class="text">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery soChange 切換插件 支持焦點圖片切換 選項卡切換 帶按鈕與分頁索引按鈕切換</a><br />
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換</a>
				</div>
			</dd>
			<dt><span class="date">2012-03-20</span><span class="title"><a href="http://www.dijiuzhanzhang.com/">js圖片特效</a></span></dt>
			<dd>
				<div class="thumb"><a href="http://www.dijiuzhanzhang.com/"><img src="images/cat.jpg" alt="TITLE03"></a></div>
				<div class="text">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">js圖片特效制作百葉窗濾鏡輪播效果js焦點圖片切換</a><br />
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">js圖片特效制作js焦點圖上下滾動slider切換效果</a>
				</div>
			</dd>
			<dt><span class="date">2012-03-20</span><span class="title"><a href="http://www.dijiuzhanzhang.com/">js圖片滾動</a></span></dt>
			<dd>
				<div class="thumb"><a href="http://www.dijiuzhanzhang.com/"><img src="images/101206.jpg" alt="TITLE04"></a></div>
				<div class="text">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank">javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a><br />
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"> javascript滾動圖片帶按鈕控制上下左右自動無縫滾動</a>
				</div>
			</dd>
		</dl>
	</div>
<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("slider2",0,"open");
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 收縮展開 展開收縮 收縮 展開 收縮菜單 收縮導航 滾動切換 滾動條切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子