jquery手机排行榜标题图片滑动展开代码



98 389 130



特效描述:图片滑动展开,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

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