PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย

19 February 2010 By Ninenik Narkdee
accordion jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ accordion jquery



ตัวอย่าง

CSS ตัวอย่าง

<style type="text/css">
div#containSlidebanner{
	margin:0;
	padding:0;
	width:500px;
	height:250px;
	overflow:hidden;
	background-color:#FFFF33;
}
ul#slideBanner,ul#slideBanner li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
ul#slideBanner{
	width:550px;
	white-space:nowrap;
}
ul#slideBanner li{
	width:100px;
	height:250px;
}
li#banner1{
	background-color:#CC99CC;
}
li#banner2{
	background-color:#99CC66;
}
li#banner3{
	background-color:#33CC99;
}
li#banner4{
	background-color:#FFFF66;
}
li#banner5{
	background-color:#CCFF00;
}
</style>

HTML Code ตัวอย่าง

<div id="containSlidebanner">
<ul id="slideBanner">
<li id="banner1"></li>
<li id="banner2"></li>
<li id="banner3"></li>
<li id="banner4"></li>
<li id="banner5"></li>
</ul>
</div>

jQuery Code ตัวอย่าง

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul#slideBanner li").hover(function(index){
		$(this).animate({
			width:"300px"
		},200);
		$(this).prevAll("li").animate({
			width:"50px"
		},200);
		$(this).nextAll("li").animate({
			width:"50px"
		},200);
	},function(){
		$(this).stop(true);
		$(this).siblings("li").stop(true);
	});
	$("div#containSlidebanner").hover(function(){
	},function(){
		$("ul#slideBanner li").animate({
			width:"100px"
		},200);
	});
});
</script>

 



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: accordion jquery







URL สำหรับอ้างอิง