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:: jquery accordion







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ