原生js accordion手风琴插件制作slider滑动水平手风琴切换



98 389 130



特效描述:手风琴插件 slider滑动 水平手风琴 手风琴切换,实用的Accordion手风琴js特效

代码结构

1. 引入CSS

<link href="css/public.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/accordion.js"></script>

3. HTML代码

<div class="zpmenu">
	<dl id="slider2">
		<dt class="open"><img src="images/ft.png" alt="Jquery学堂福田校区" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com">Jquery学堂福田校区</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">平面广告</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">室内设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网页设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">工业设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">深圳招调工</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">景观设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">珠宝设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建筑表现</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">人力资源管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业培训师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">营销师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">心理咨询师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建造师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">影视后期</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">美术手绘</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">设计认证</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">商业摄影</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建筑工程培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">客户服务管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">招标师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业内训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">设计开课通知</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">管理服务开课通知</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/ns.png" alt="Jquery学堂南山校区" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com">Jquery学堂南山校区</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">室内设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">平面设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">景观设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网站设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建筑表现</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">珠宝设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">工业设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网站推广</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">影视后期</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">模具设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">采购师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">招调工</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">广告设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">美术手绘</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">自学考试</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网络教育</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">成人高考</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">人力资源管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业培训师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">心理咨询师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">营销师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">物流师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">会计综合认证</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/ba.png" alt="Jquery学堂宝安校区" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com">Jquery学堂宝安校区</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">人力资源</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">物流师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">会计综合认证</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">采购师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">公共营养师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">营销师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">平面设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">室内设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网页设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">模具设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">工业产品设训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">宝安招调工</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">成人高考报名</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">自学考试报名</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网络教育报名</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">心理咨询师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业培训师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">SEO网站推广</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">美术手绘</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">学历技能报名</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/gl.png" alt="Jquery学堂管理服务中心" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com?">Jquery学堂管理中心</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">人力资源管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业培训师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">心理咨询师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">营销师培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">客户服务管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业内训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">人力资源管理师开课通知</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">客户服务管理师开课通知</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业培训师开课通知</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">营销师开课通知</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业内训开课通知</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">心理咨询师开课通知</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/sz.png" alt="Jquery学堂艺术数字教育中心" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.szzppx.com">Jquery学堂数字中心</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">平面设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">工业设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建筑表现培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网站设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">影视后期培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">广告设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">室内设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">家具设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">美术手绘培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">企业定项培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">景观设计培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">FLASH动画培训</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">珠宝设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">预算造价</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">SEO</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">美术高考</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建造师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">深圳积分入户</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">华南师大</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/xl.png" alt="Jquery学堂成人学历教育中心" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com?">Jquery学堂学历中心</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">成人高考网</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">网络教育</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">深圳自学考试</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">招生院校</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">华南师范大学</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">研究生考试</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">课程专业</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">平面广告设计一年制脱产班</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">华南师范大学一年半脱产班</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/yx.png" alt="Jquery学堂影像教育中心" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com">Jquery学堂影像中心</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">网店摄影培训班</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">专业摄影培训班</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">摄影认证</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">高级商业摄影后期班</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">职业(商业)摄影师培训班</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">摄影师国家职业资格认证</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">摄影培训招生简章</a></li>
				</ul>
			</div>
		</dd>
		<dt><img src="images/gz.png" alt="Jquery学堂广州校区" /></dt>
		<dd>
			<div class="zpinfor">
				<h1><a target="_blank" href="http://www.17sucai.com">Jquery学堂广州校区</a></h1>
				<span>Jquery学堂群:①②③群(已满)  ④群-76287629(开放中)</span>
				<h2>热门专业课程</h2>
				<ul>
					<li><a target="_blank" href="http://www.17sucai.com/">广告设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">室内设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">动漫设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">珠宝设计</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">营销师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">客户服务管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">人力资源管理师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">建造师</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">六大员</a></li>
					<li><a target="_blank" href="http://www.17sucai.com/">八大工</a></li>
				</ul>
			</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

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