jquery手機排行榜標題圖片滑動展開代碼



101 402 135



特效描述:圖片滑動展開,jquery標題圖片滑動展開

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/j-accordin.min.js"></script>

3. HTML代碼

<div class="accordion_container">
	<div class="buttomtitle"></div>
	<div class="accordion">
		<div class="first current">
			<div class="content">
				<img src="images/shouji_buttom1.jpg" />
				<div class="word" >
					<p>價格:<em style="color:#F00;"><strong>¥6088</strong></em></p><br />
					<p><a href="#">國強宏利機吾大世</a></p>
				</div>
			</div>
			<div class="tab">
				<span><img src="images/tea1.jpg" /></span>
				<strong><a href="#" target="_blank">蘋果 iPhone 6 Plus</a></strong>
			</div>
		</div>
		<div class="second">
			<div class="content second">
				<a href="#" target="_blank"><img src="images/shouji_buttom2.jpg" /></a>
				<div class="word" >
					<p>價格:<em style="color:#F00;"><strong>¥2999</strong></em></p><br />
					<p><a href="#">盛旺鴻運電腦經營</a></p>
				</div>
			</div>
			<div class="tab">
				<span><img src="images/tea2.jpg" /></span>
				<strong><a href="#" target="_blank">OPPO R5</a></strong>
			</div>
		</div>
		<div class="third">
			<div class="content third">
				<a href="#" target="_blank"><img src="images/shouji_buttom3.jpg" /></a>
				<div class="word" >
					<p>價格:<em style="color:#F00;"><strong>¥4999</strong></em></p><br />
					<p><a href="#">八一數碼手機專營</a></p>
				</div>
			</div>
			<div class="tab">
				<span><img src="images/tea3.jpg" /></span>
				<strong><a href="#" target="_blank">索尼Xperia Z3</a></strong>
			</div>
		</div>
		<div class="four">
			<div class="content four">
				<a href="#" target="_blank"><img src="images/shouji_buttom4.jpg" /></a>
				<div class="word" >
					<p>價格:<em style="color:#F00;"><strong>¥5399</strong></em></p><br />
					<p><a href="#">八一數碼手機專營</a></p>
				</div>
			</div>
			<div class="tab">
				<span><img src="images/tea4.jpg" /></span>
				<strong><a href="#" target="_blank">三星GALAXY Note4</a></strong>
			</div>
		</div>
		<div class="file">
			<div class="content file">
				<a href="#" target="_blank"><img src="images/shouji_buttom5.jpg" /></a>
				<div class="word" >
					<p>價格:<em style="color:#F00;"><strong>¥999</strong></em></p><br />
					<p><a href="#">宏達手機旗艦店</a></p>
				</div>
			</div>
			<div class="tab">
				<span><img src="images/tea5.jpg" /></span>
				<strong><a href="#" target="_blank">中興V5 Max</a></strong>
			</div>
		</div>
	</div>
</div>
</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表