jQuery手风琴插件按钮和鼠标滚动控制竖直手风琴滚动切换



179 712 238



特效描述:jQuery 手风琴插件 按钮和鼠标滚动控制 竖直手风琴 滚动切换,jquery手风琴插件制作竖直手风琴切换通过上下按钮和鼠标滚动来控制手风琴依次滚动切换。

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>

3. HTML代码

<div class="container">
	<div id="va-accordion" class="va-container">
		<div class="va-nav">
			<span class="va-nav-prev">Previous</span>
			<span class="va-nav-next">Next</span>
		</div>
		<div class="va-wrapper">
			<div class="va-slice va-slice-1">
				<h3 class="va-title">Marketing</h3>
				<div class="va-content">
					<p>Henry Watson</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>
			</div>
			<div class="va-slice va-slice-2">
				<h3 class="va-title">Management</h3>
				<div class="va-content">
					<p>Keith Johnson</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>	
			</div>
			<div class="va-slice va-slice-3">
				<h3 class="va-title">Visual Design</h3>
				<div class="va-content">
					<p>Andrew Alaniz</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>	
			</div>
			<div class="va-slice va-slice-4">
				<h3 class="va-title">Quality Control</h3>
				<div class="va-content">
					<p>Ben Freeman</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>	
			</div>
			<div class="va-slice va-slice-5">
				<h3 class="va-title">Web development</h3>
				<div class="va-content">
					<p>Alex Schuman</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>	
			</div>
			<div class="va-slice va-slice-6">
				<h3 class="va-title">Customer Support</h3>
				<div class="va-content">
					<p>Maria Wales</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>	
			</div>
			<div class="va-slice va-slice-7">
				<h3 class="va-title">Server Administration</h3>
				<div class="va-content">
					<p>Paul White</p>
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">About</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Portfolio</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">Contact</a></li>
					</ul>
				</div>	
			</div>
		</div>
	</div>
	<div class="more">
		<ul>
			<li>更多演示:</li>
			<li class="selected"><a href="index.html">演示 1</a></li>
			<li><a href="example2.html">演示 2</a></li>
			<li><a href="example3.html">演示 3</a></li>
			<li><a href="example4.html">演示 4</a></li>
			<li><a href="example5.html">演示 5</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$(function() {
	$('#va-accordion').vaccordion();
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 切换按钮 form表单 焦点图幻灯片 滚动切换 图片滚动 图片轮播 自动滚动图片轮播 手风琴 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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