Js运动基础

发布时间:2016-11-25 编辑:tlj 阅读:

 
条件:位置变化,position:absolute;
 
改变:改变目标的left或者top;
  
控制:通过定时器进行控制定时器的频率
  
匀速运动:速度speed为固定的值;
  
缓冲运动:速度根据条件改变;
  
多物体运动:多个定时器进行控制;
  
链式运动:从上到下链式执行;
  
任意属性运动:改变物体的任意属性;
  
完美运动:可同时改变多个任意的属性;
  

一、匀速运动
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
var timer=null;//创建一个空的对象
function startMove(obj,target){
clearInterval(timer);//关闭定时器防止多开;
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<target){
speed=30;
}else{
speed=-30;
};//根据距离判断速度的正负
if(Math.abs(target-obj.offsetLeft)<Math.abs(speed)){
clearInterval(timer);
obj.style.left=target+"px";
//条件成立后关闭定时器
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};//把运动条件放在if里面防止未达条件而执行
},30)//刷新频率,每隔30毫秒执行一次。
};
</script>

 

要点:
  
a.获取
  
1:style.left取到的是xxpx带单位;所以obj.style.left=target+”px”;
  
2:offsetLeft取到的是一个数字不带单位。
  
b.定时器
  
1:clearInterval(timer);//创建一个定时器前,先关闭定时器防止多开;
  
2:clearInterval(timer);//关闭定时器,应该在定时器的内部;
  
c.取绝对值
  
条件Math.abs(target-obj.offsetLeft)target有可能为负数,所以要取绝对值.
  
传参*2
  

二、缓冲运动
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var timer=null;
function startMove(obj,target){
clearInterval(timer);
timer=setInterval(function(){
var speed=(target-obj.offsetLeft)/10;//距离减去一个变化的值再除以一个固定的值。
speed=speed>0?Math.ceil(speed):Math.floor(speed);//speed得出的结果有可能为小数,需要向上向下取整。
if(obj.offsetLeft==target){
  clearInterval(timer);
}else{
  obj.style.left=obj.offsetLeft+speed+"px";
}
},30)
};
</script>
要点:
  
1:缓冲运动是通过距离target减去offsetLeft(变化的值),再除一个固定的值,得出的结果有可能为小数。
  
所以当速度为正时要向上取整(Math.ceil),速度为负时要向下取整(Math.floor)。
  
2:距离越大速度越快,固定的值越小,速度越快。
  
传参*2
  

三、多物体运动
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var timer=null;
function startMove(obj,target){
clearInterval(obj.timer);关闭当前目标的定时器
obj.timer=setInterval(function(){
var speed=(target-obj.offsetLeft)/10;//距离减去一个变化的值再除以一个固定的值。
speed=speed>0?Math.ceil(speed):Math.floor(speed);//speed得出的结果有可能为小数,需要向上向下取整。
if(obj.offsetLeft==target){
  clearInterval(obj.timer);
}else{
  obj.style.left=obj.offsetLeft+speed+"px";
}
},30)
};
</script>
要点:
  
1.多物体运动,给每个物体增加一个定时器进行控制,互不干扰。
  
2.把定时器当作一个属性。
  
传参*2
  

四、链式运动
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
var timer=null;
function startMove(obj,target,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
document.title=speed;
if(obj.offsetLeft==target){
clearInterval(obj.timer);
if(fn){
fn();
};
}else{
obj.style.left=obj.offsetLeft+speed+"px";
}
},30)
};
</script>
要点:
  
0.改变style.left时,在ie下一定要先设置css,left:0;或其它;
  
1.链式运动只是在多物体运动结束时,一个函数fn()。
  
2.fn可不传参。
  
3.fn()函数可以无限增加。
  
传参*3
  

五、任意值运动
 

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
<script>
var timer=null;
		function startMove(obj,attr,target,fn){
			  clearInterval(obj.timer);
			  obj.timer=setInterval(function(){
			  var cur=0;
			  if(attr=="opacity"){
			  	cur=Math.round(parseFloat(getStyle(obj,attr))*100);//设置透明度
			  }else{
			  	cur=parseInt(getStyle(obj,attr));
			  };//判断是否为透明度
				var speed=(target-cur)/10;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(target-cur==0){
					clearInterval(obj.timer);
					if(fn)fn();
				}else{
					if(attr=="opacity"){
						obj.style.opacity=(cur+speed)/100;
						obj.style.filter="alpha(opacity:"+(cur+speed)+")";//改变透明度
					}else{
						obj.style[attr]=cur+speed+"px";
					};//判断是否为透明度
				};
			},30);
		};
 
		function getStyle(obj,name){
			if(name=="border-width"){
				name="border-left-width";
			};
			if(obj.currentStyle){
				return obj.currentStyle[name]; //ie
			}else{
				return getComputedStyle(obj,false)[name];//其它
			};
		};
</script>
要点:
  
1.offsetLeft替换为getStyle函数(获取样式表样式,获取的值带单位)。
  
2.border-width在firefox下理解为border-(top/right/bottom/left)-width;获取任意一边就行name=”border-left-width”;
  
3.改变透明度,IE下为filter:alpha(opacity=80);,其它为opacity:0.8;要在设置和改变透明度的时候进行判断。
  
Math.ceil向上取整
  
Math.floor向下取整
  
Math.abs取绝对值
  
Math.round四舍五入
  
parseInt转换为整数
  
parseFloat转换为小数
  
传参*4
  
顺序:
  
1.判断透明度(设置时判断,改变时判断)
  
2.判断速度(透明度时,位置变化时)
  
3.判断停止(透明度时,位置变化时)
  

六、完美运动
 

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
	<script>
	window.onload=function(){
		var oDiv=document.getElementById("div");
		startMove(oDiv,{width:400,height:400,left:500});//调用
	};//完毕后加载
	function getStyle(obj,attr){
		if(attr=="border-width"){
			attr="border-left-width";
		};
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj,false)[attr];
		};
	};//获取样式表样式
 
	var timer=null;
	function startMove(obj,json,fn){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			var bStop=true;
			for(var attr in json){
				cur=0;
				if(attr=="opacity"){
					cur=Math.round(parseFloat(getStyle(obj,attr))*100);
				}else{
					cur=parseInt(getStyle(obj,attr));
				};
				if(cur!=json[attr]){
					bStop=false;
				};//如果没有全部成立bool值为false
				var speed=(json[attr]-cur)/10;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(attr=="opacity"){
					obj.style.opacity=(cur+speed)/100;
					obj.style.filter="alpha(opacity:"+(cur+speed)+")";
				}else{
					obj.style[attr]=cur+speed+"px";
				};
			};//循环所有属性
			if(bStop){
				clearInterval(obj.timer);
				if(fn)fn();
			};//条件全部成立
		},30);
	};
	</script>
要点:
  
1.通过for循环所有json属性
  
2.判断成立时在循环之外。
  
顺序:
  
1.for循环json
  
2.条件不成立,改变bool值
  
3.全部成立,关闭定时器

关注我

图文推荐

云标签

友链交换