您的位置:首页 > Web前端 > JQuery

jQuery实现横向滑动切换效果

2011-09-06 09:52 645 查看
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" onclick="slideleft();" value="slide"></input>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: