js手风琴插件制作slider竖直垂直手风琴点击标题内容展开收缩



119 475 159



特效描述:手风琴插件 竖直手风琴 垂直手风琴 点击标题内容 展开收缩,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

加群请备注:从官网了解到