jquery css3靈活的滑動頂級手風琴



95 378 127



特效描述:靈活手風琴 滑動頂級手風琴,靈活的滑動頂級手風琴

代碼結構

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=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />

2. 引入JS

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

3. HTML代碼

<div class="wrapper">
	<div id="st-accordion" class="st-accordion">
		<ul>
			<li>
				<a href="#">Photography<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
					<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
					<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
					<img src="images/1.jpg" alt="image01"/>
					<img src="images/2.jpg" alt="image02"/>
					<img src="images/3.jpg" alt="image03"/>
					<img src="images/4.jpg" alt="image04"/>
					<img src="images/5.jpg" alt="image05"/>
					<img src="images/6.jpg" alt="image06"/>
				</div>
			</li>
			<li>
				<a href="#">Web Design<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
					<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
					<img src="images/7.jpg" alt="image07"/>
					<img src="images/8.jpg" alt="image08"/>
					<img src="images/9.jpg" alt="image09"/>
					<img src="images/10.jpg" alt="image10"/>
					<img src="images/11.jpg" alt="image11"/>
					<img src="images/12.jpg" alt="image12"/>
				</div>
			</li>
			<li>
				<a href="#">Illustrations<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>O my friend - but it is too much for my strength - I sink under the weight of the splendour of these visions!</p>
					<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
					<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
				</div>
			</li>
			<li>
				<a href="#">Miscancellous<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?"</p>
					<p>He thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
				</div>
			</li>
			<li>
				<a href="#">References<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Internship<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Jobs<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>O my friend - but it is too much for my strength - I sink under the weight of the splendour of these visions!</p>
					<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
					<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
				</div>
			</li>
			<li>
				<a href="#">Events<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Newsletter<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Contact<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
					<p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</p>
				</div>
			</li>
			<li>
				<a href="#">Events<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Newsletter<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Contact<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
					<p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</p>
				</div>
			</li>
			<li>
				<a href="#">Events<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Newsletter<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
					<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>
				</div>
			</li>
			<li>
				<a href="#">Contact<span class="st-arrow">Open or Close</span></a>
				<div class="st-content">
					<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
					<p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</p>
				</div>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$(function() {
	$('#st-accordion').accordion({
		oneOpenedItem	: true
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動手風琴
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子