<强>结构:盒子包含ul、ul包含4个李;ul绝对定位。
复制商阳,二间到第li-4后面,为了区分于商阳,二间,内容改为阳溪,偏历,颜色不变。此时ul包含6个李。
需要注意的是,移动的是ul这个大盒子而不是李。
<强>原理:当ul绝对定位的左值等于(商阳+二间+三间+ li-4)的宽度时,利用JavaScript快速复原左值为0。
<>强效果图:
<强>示例代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt;风格媒体="屏幕"比;
* {
填充:0;
保证金:0;
}
ul,李{
list-style:没有;
}
img {
vertical-align:最高;
}
#箱{
宽度:400 px;
身高:100 px;
保证金:100 px的汽车;
背景颜色:粉色;
位置:相对;
溢出:隐藏;
}
#箱ul {
宽度:2000 px;
位置:绝对的;
左:0;
上图:0;
}
李#箱{
浮:左;
}
.aa {
宽度:200 px;
身高:100 px;
}
.li-1 {
background - color: # f6e659;
}
.li-2 {
background - color: # 57 fa4f;
}
.li-3 {
background - color: # 3 a8ef1;
}
.li-4 {
background - color: # c057f1;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt; ul>
& lt;李类="商阳aa "祝辞li-1
& lt;李类="二间aa "祝辞li-2
& lt;李类="三间aa "祝辞li-3
& lt;李类=" li-4 aa "祝辞li-4
& lt;李类="商阳aa "祝辞li-5
& lt;李类="二间aa "祝辞li-6
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>
& lt;脚本type=" text/javascript祝辞
var盒=. getelementbyid(“盒”);
var ul=box.children [0];
var num=0;
计时器=setInterval (fn, 10);
函数fn () {
num -;
num & lt;=-800 & # 63;num=0: num;
ul.style。左=num +“px”;
}
& lt;/script>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
