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

19 February 2010 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

jquery accordion

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

ดูแล้ว 11,303 ครั้ง

ตัวอย่าง

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 สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน