首页 > 代码库 > javascript 多物体任意运动框架

javascript 多物体任意运动框架

2024-08-04 09:20:01   223人阅读

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

注意事项：

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			div{
				width:200px;
				height:200px;
				float:left;
				background:red;
				margin:10px;
				
			}
		</style>
		<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].onmouseover=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=http://www.mamicode.com/Math.round(parseFloat(getStyle(obj,atrr))*100);//计算机运算会有错误，需要取约数>
运行效果图：

javascript 多物体任意运动框架


联系
我们