js-move/test.html at master · nonoma/js-move · GitHub

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单运动框架实现</title>

</head>
<style>
*{margin:0;padding:0}

ul li{

	width:200px;
	height:100px;
	margin-bottom:20px;
	opacity:0.5;
	filter:alpha(opacity=30);
	background:red;
	border:solid #0F0C0C 2px;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload=function(){
	var oMove=document.getElementById("move");
	var list=oMove.getElementsByTagName("li");
	for(var i=0;i<list.length;i++){
		list[i].timer=null;        //给每个元素添加定时器，避免争夺定时器冲突
		list[i].onmouseover=function(){
			    var _this=this;   //已修复无法实现链式运动的BUG    原因是当第一个函数运行完毕后，this的对象就变为了window。
			    startMove(_this,{width:400,opacity:100},function(){
					startMove(_this,{height:200});
					});
			}
		list[i].onmouseout=function(){
			    var _this=this;
			    startMove(_this,{width:200,opacity:50},function(){
					startMove(_this,{height:100});
					});
			}
	}
}


</script>
<body>
<ul id="move">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>