วันนี้เราจะมาทำ Horizontal 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 สำหรับใช้งานกันเลยครับ ถ้าไปประยุกต์ก็คือไฟล์เว็บของท่านนั้นแหละ
<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>
*Code จะต้องอยู่ระหว่าง <body> กับ </body> นะครับ
คราวนี้ตัวหลักออกโรงแล้ว ไฟล์ที่ทำให้เป็น Horizontal Accordion สมบูรณ์แบบ
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</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>
*Code จะอยู่อีกไฟล์แล้วเรียกใช้งานหรือจะอยู่ในไฟล์ Html นั้นๆก็ได้ ถ้าอยู่ในไฟล์ Html ต้องอยู่ระหว่าง <html> กับ <body> นะครับ
หมายเหตุ บทความนี้สำหรับผู้มีความรู้ในเรื่อง jQuery มาบ้างแล้ว ถ้ายังไม่มีเลยโปรดคลิก
เริ่มต้นกับ jquery ตัวนี้ไม่จำเป็นต้องเรียกใช้งาน jQuery อีกแล้วนะครับ ไม่จำเป็นต้องมีไฟล์ jQuery ด้วย เพราะใช้ Google API มาแทน
Credit : ninenik
Rewrite : Dexmore Bot
ลิงค์หัวข้อ:
http://dexmore.com/topic/674 
Web Achieve 
หน้า: 1 
Powered by 