jQuery CSS3水平滑動手風琴文字圖片切換特效代碼



98 390 131



特效描述:水平滑動 滑動手風琴 文字圖片切換 切換特效,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

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

老夫子电子