jQuery CSS3水平滑动手风琴文字图片切换特效代码



95 378 127



特效描述:水平滑动 滑动手风琴 文字图片切换 切换特效,jQuery+CSS3手风琴图片切换特效

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="content">
	<div class="title"></div>
	<!--特效部分-->
	<ul class="accordion" id="accordion">
		<li class="bg1">
			<div class="heading">Guler</div>
			<div class="bgDescription"></div>
			<div class="description">
				<h2>Guler</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<a href="#">more &rarr;</a>
			</div>
		</li>
		<li class="bg2">
			<div class="heading">Phillips</div>
			<div class="bgDescription"></div>
			<div class="description">
				<h2>Phillips</h2>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
				<a href="#">more &rarr;</a>
			</div>
		</li>
		<li class="bg3">
			<div class="heading">Diamanti</div>
			<div class="bgDescription"></div>
			<div class="description">
				<h2>Diamanti</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<a href="#">more &rarr;</a>
			</div>
		</li>
		<li class="bg4 bleft">
			<div class="heading">Meiklejohn</div>
			<div class="bgDescription"></div>
			<div class="description">
				<h2>Meiklejohn</h2>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
				<a href="#">more &rarr;</a>
			</div>
		</li>
	</ul>
	<!--特效结束-->
</div>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
	$('#accordion > li').hover(function(){
		var $this = $(this);
		$this.stop().animate({'width':'480px'},500);
		$('.heading',$this).stop(true,true).fadeOut();
		$('.bgDescription',$this).stop(true,true).slideDown(500);
		$('.description',$this).stop(true,true).fadeIn();
	},function(){
		var $this = $(this);
		$this.stop().animate({'width':'115px'},1000);
		$('.heading',$this).stop(true,true).fadeIn();
		$('.description',$this).stop(true,true).fadeOut(500);
		$('.bgDescription',$this).stop(true,true).slideUp(700);
	});
});
</script>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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