利用jQuery CSS3实现手风琴特效



42 166 56



特效描述:利用jQuery CSS3实现手风琴特效,利用jQuery CSS3实现手风琴特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>

3. HTML代码

        <div class="container">
			<header>
				<h1>Image Accordion <span>with CSS3</span></h1>
				<h2>A css-only image accordion with "click" events.</h2>
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
					<!--span class="no-csstransforms">CSS transforms are not supported in your browser</span-->
					<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
			</header>
			<section class="main">
				<div class="ia-container">
					<figure>
						<img src="images/1.jpg" alt="image01" />
						<input type="radio" name="radio-set" checked="checked"/>
						<figcaption><span>True Colors</span></figcaption>
						<figure>
							<img src="images/2.jpg" alt="image02" />
							<input type="radio" name="radio-set" />
							<figcaption><span>Honest Light</span></figcaption>
							<figure>
								<img src="images/3.jpg" alt="image03" />
								<input type="radio" name="radio-set" />
								<figcaption><span>Silent Serenity</span></figcaption>
								<figure>
									<img src="images/4.jpg" alt="image04" />
									<input type="radio" name="radio-set" />
									<figcaption><span>Warm Welcome</span></figcaption>
									<figure>
										<img src="images/5.jpg" alt="image05" />
										<input type="radio" name="radio-set" />
										<figcaption><span>Sensible Magic</span></figcaption>
										<figure>
											<img src="images/6.jpg" alt="image06" />
											<input type="radio" name="radio-set" />
											<figcaption><span>Lovely Midnight</span></figcaption>
											<figure>
												<img src="images/7.jpg" alt="image07" />
												<input type="radio" name="radio-set" />
												<figcaption><span>Illuminated Darkness</span></figcaption>											
												<figure>
													<img src="images/8.jpg" alt="image08" />
													<input id="ia-selector-last" type="radio" name="radio-set" />
													<figcaption><span>Happy Child</span></figcaption>
												</figure>
											</figure>
										</figure>	
									</figure>	
								</figure>
							</figure>
						</figure>
					</figure>
				</div><!-- ia-container -->
			</section>
        </div>



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


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片 带标题的焦点图 图片滑动 手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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