利用jQuery实现平滑分栏标签切换特效



54 213 72



特效描述:利用jQuery实现 平滑分栏 标签切换特效,利用jQuery实现平滑分栏标签切换特效

代码结构

1. 引入CSS

<link href='css/style.css' rel='stylesheet' type='text/css' />
<link href='css/tabbedContent.css' rel='stylesheet' type='text/css' />

2. 引入JS

<script type='text/javascript' src='js/jquery1.3.2.js'></script>
<script src="js/tabbedContent.js" type="text/javascript"></script>

3. HTML代码

		<div style='padding: 15px;'>
			<div class='content'>
				<h1>Tabbed content with jQuery</h1>
				<p>
					An example of some tabbed content containers.
				</p> 
				<h2>Example:</h2>
				<div class='tabbed_content'>
					<div class='tabs'>
						<div class='moving_bg'>
							&nbsp;
						</div>
						<span class='tab_item'>
							Latest posts
						</span>
						<span class='tab_item'>
							Top posts
						</span>
						<span class='tab_item'>
							Partners
						</span>
						<span class='tab_item'>
							Links
						</span>
					</div>
					<div class='slide_content'>						
						<div class='tabslider'>
							<ul>
								<li>
									<a href='http://51qianduan.com/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Image slider for displaying pictures or portfolios
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										AjaxTwits - Load Tweets on your website with AJAX
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://51qianduan.com/'>
										Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Lightbox + PhotoNav = LightNav
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://51qianduan.com/'>
										Sieb Design | Design + Illustration
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Cybox | Internet & Communicatie
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Hypekid | Pim Arts, a freelance web-developer from the Netherlands
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Marcofolio | Marco's weblog
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Dev Tips | Become a better developer, one tip at a time
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://51qianduan.com'>
										Last.fm profile
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com'>
										Gaya Design on Twitter
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com'>
										My Youtube Channel
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com'>
										Linked in profile
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Stuff to do with a NDS blog
									</a>
								</li>
							</ul>
						</div>
						<br style='clear: both' />
					</div>
				</div>
				<br />
				<br />
				<div class='tabbed_content'>
					<div class='tabs'>
						<div class='moving_bg'>
							&nbsp;
						</div>
						<span class='tab_item'>
							Latest posts
						</span>
						<span class='tab_item'>
							Top posts
						</span>
						<span class='tab_item'>
							Partners
						</span>
						<span class='tab_item'>
							Links
						</span>
					</div>
					<div class='slide_content'>						
						<div class='tabslider'>
							<ul>
								<li>
									<a href='http://51qianduan.com/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Image slider for displaying pictures or portfolios
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										AjaxTwits - Load Tweets on your website with AJAX
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://51qianduan.com/'>
										Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Lightbox + PhotoNav = LightNav
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://51qianduan.com/'>
										Sieb Design | Design + Illustration
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Cybox | Internet & Communicatie
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Hypekid | Pim Arts, a freelance web-developer from the Netherlands
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Marcofolio | Marco's weblog
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Dev Tips | Become a better developer, one tip at a time
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://51qianduan.com'>
										Last.fm profile
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com'>
										Gaya Design on Twitter
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com'>
										My Youtube Channel
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com'>
										Linked in profile
									</a>
								</li>
								<li>
									<a href='http://51qianduan.com/'>
										Stuff to do with a NDS blog
									</a>
								</li>
							</ul>
						</div>
						<br style='clear: both' />
					</div>
				</div>
				<br />
				<br />
			</div>
		</div>
</div>



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


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 文字滑动 文字切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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