PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

19 February 2010 By
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>

 







Tags:: accordion jquery






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


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