jQuery实现横向滑动切换效果

CSS中的两个Width,*width是针对IE的,因为IE的width是包括边框border的,而其它浏览器是不包括的,所以IE的width比其它的多2个像素.

.main {
    width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
    height:300px;width:1600px;position:relative;
}
.sub {
    width:398px;constructor和prototype的区别

    *width:400px;
    height:298px;border:1px solid #00FFFF;float:left;
}

Javascript代码:

function slideleft() {
    $('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
    $('#parent>div:last').after($('#parent>div:first'));
    $('#parent>div:last').css('width', '398px');
}
HTML代码:

    <div class="main">
        <div id="parent" class="parent">
            <div id="sub1" class="sub" style="background:#00FF00;"></div>
            <div id="sub2" class="sub" style="background:#0000FF;"></div>
            <div id="sub3" class="sub" style="background:#00FFFF;"></div>
            <div id="sub3" class="sub" style="background:#FF0000;"></div>
        </div>
    </div>Java多级目录的生成

    <input type="button" οnclick="slideleft();" value="slide"></input>

转载于:https://www.cnblogs.com/sky7034/archive/2011/09/06/2168407.html