PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

19 February 2010 By Ninenik Narkdee
jquery accordion

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



ตัวอย่าง

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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



บริการเว็บ server web hosting
บริการเว็บ server web hosting


Tags:: accordion jquery







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