CSS代码:
回帖的问的比较多,解释一下,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;
*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>
<input type="button" onclick="slideleft();" value="slide"></input>
分享到:
相关推荐
jQuery鼠标经过图片背景滑动切换效果基于jquery1.10.2.js实现,鼠标经过图片滑动切换背景动态效果。
jQuery实现按钮滑动切换
jQuery列表图片控制图片滑动切换代码 jQuery列表图片控制图片滑动切换代码
jQuery左侧图片右侧文字滑动切换代码是一款基于jQuery实现的列表图片控制图片滑动切换代码。
基于JQuery的Banner大图片横向切换效果
基于JQuery的Banner大图片横向切换效果,jquery.cycle.all.min这个插件
jquery鼠标悬停文字滑动切换效果代码 码
基于JQuery的大图片横向切换效果,自动切换,可以左右设置切换方式。
jquery宽屏图片滑动切换效果代码是一款基于jquery实现的banner多个div容器宽屏图片滑动切换效果代码。
jQuery选项卡标签滑动切换效果
jQuery点击右侧按钮图片滑动切换代码
jQuery鼠标经过图片背景滑动切换效果 jQuery鼠标经过图片背景滑动切换效果
【Jquery经典特效26】jQuery动画背景滑动切换效果
jquery banner图片动画切换_图片左右滑动切换轮播代码
94、jQuery左右滑动切换图片代码
jQuery图片重叠滑动切换效果代码是一款5张图片重叠切换效果代码。
jQuery带遮罩高亮图片滑动切换代码是一款带遮罩高亮效果的旋转木马图片切换特效。
【Jquery经典特效16】jQuery鼠标经过图片背景滑动切换效果
jQuery仿腾讯视频图片滑动门切换效果
jQuery+HTML5页面整屏滑动切换代码.zip