空心格子就好比是每个li，给它设定相对定位属性，设置overflow:hidden；黑块为li子元素，高度为li的2倍，设置absolute属性，我们正是要改变它的top值从而获得变化！
布局分析：
注意top值得变化！默认top=0时候，显示的“一楼上铺”，当top=-40px时候，li的子元素 上移40px，这时候显示的内容就为“一楼下铺”注意p元素的包裹层div
JS分析：
1、要开多个定时器来达到效果
2、执行相反方向
3、执行多组运动
4、累加产生错落感
5、产生时间间隔的动画
JS代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<script>
window.onload =
function
(){
var
oUl = document.getElementById(
'ul1'
);
var
oUl2 = document.getElementById(
'ul2'
);
toShow(oUl);
//每四秒执行一次
setTimeout(
function
(){
toShow(oUl2);
},4000);
function
toShow(obj){
var
aDiv = obj.getElementsByTagName(
'div'
);
var
iNow = 0;
var
timer =
null
;
var
bBtn =
true
;
setInterval(
function
(){
toChange();
},2000);
function
toChange(){
timer = setInterval(
function
(){
if
(iNow==aDiv.length){
clearInterval(timer);
iNow = 0;
bBtn = !bBtn;
}
else
if
(bBtn){
startMove(aDiv[iNow],{top:0},
function
(){
var
p = document.getElementsByClassName(
'p-2'
);
for
(
var
i=0; i<p.length;i++){
p[i].style.background =
'red'
;
}
});
iNow++;
}
else
{
startMove(aDiv[iNow],{top:-30});
iNow++;
}
},100);
}
}
};
//运动框架
function
startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer = setInterval(
function
(){
var
bBtn =
true
;
for
(
var
attr
in
json){
var
iCur = 0;
iCur = parseInt(getStyle(obj,attr)) || 0;
var
iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if
(iCur!=json[attr]){
bBtn =
false
;
}
obj.style[attr] = iCur + iSpeed +
'px'
;
}
if
(bBtn){
clearInterval(obj.timer);
if
(endFn){
endFn.call(obj);
}
}
},30);
}
//获取非行间样式
function
getStyle(obj,attr){
if
(obj.currentStyle){
return
obj.currentStyle[attr];
}
else
{
return
getComputedStyle(obj,
false
)[attr];
}
}
</script>
|