javascript 多物体任意运动框架

页面导航:首页 > 网络编程 > JavaScript > javascript 多物体任意运动框架

javascript 多物体任意运动框架

来源: 作者: 时间:2016-02-05 11:06 【

每个复杂的运动效果都是由简单的效果组成的,我们可以为简单的效果制定一个框架,也就是写一个通用函数,这样可以对元素的任何属性进行变换,复杂的效果就可以很容易实现。注

每个复杂的运动效果都是由简单的效果组成的,我们可以为简单的效果制定一个框架,也就是写一个通用函数,这样可以对元素的任何属性进行变换,复杂的效果就可以很容易实现。

注意事项:

当变换元素的透明度时,需要做特殊处理如果变换元素宽度时,对于有border的元素,如果我们使用obj.offsetWidth来取得元素宽度时,会出现错误,因为offsetWidth包括边框。如果边框是1px,定时函数中调用,obj.style.width=obj.offsetWidth-1+‘px’;,我们会发现元素的宽度不仅没有变小,反而会变大。这也是我们使用我们自定义的getStyle()取得元素宽度的原因,而没有使用offsetWidth这一类的属性。



	
		
		New Web Project
		
		<script>
			function getStyle(obj,name)
			{
				if(obj.currentStyle)
				{
					return obj.currentStyle[name];
				}
				else
				{
					return getComputedStyle(obj,null)[name];
				}
			}
			window.onload=function(){
				var objs=document.getElementsByTagName('div');
				objs[1].onmouver=function(){
					startMove(this,'width',400);
				};
				objs[1].onmouseout=function(){
					startMove(this,'width',200);
				};
				objs[0].onmouseover=function(){
					startMove(this,'height',400);
				};
				objs[0].onmouseout=function(){
					startMove(this,'height',200);
				};
				objs[2].onmouseover=function(){
					startMove(this,'opacity',100);
				};
				objs[2].onmouseout=function(){
					startMove(this,'opacity',30);
				};
			};
			
			function startMove(obj,atrr,itarget){
				clearInterval(obj.timer);
				obj.timer=setInterval(function(){
					var nowValue;
					if(atrr=='opacity')
					{
						nowValue=Math.round(parseFloat(getStyle(obj,atrr))*100);//计算机运算会有错误,需要取约数
						document.title=nowValue;
					}
					else
					{
						nowValue=parseInt(getStyle(obj,atrr));	
					}
					
						
					var speed=(itarget-nowValue)/5;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					if(nowValue==itarget)
					{
						clearInterval(obj.timer);
					}
					else
					{
						if(atrr=='opacity')
						{
							obj.style[atrr]=(nowValue+speed)/100;
							obj.style.filter='alpha(opacity:'+(nowValue+speed)+')';//IE低版本设置
						}
						else
						{
							obj.style[atrr]=nowValue+speed+'px';
						}
						
					}
					
				},30);
			}
			
		</script>
	
	
		

运行效果图:


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<