多物体运动

来源：互联网发布：linux和windows换行符编辑：程序博客网时间：2024/05/03 05:11

1、多物体宽度改变

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动画</title><style>body{margin:0;padding:0;}ul,li{list-style:none;}ul li{width:200px;height:100px;background:yellow;margin-bottom:20px;}</style></head><body><ul><li></li><li></li><li></li></ul></body></html>

<script type="text/javascript">window.onload=function(){var aLi=document.getElementsByTagName('li');for(var i=0;i<aLi.length;i++){aLi[i].timer=null;aLi[i].onmouseover=function(){startMove(this,400);}aLi[i].onmouseout=function(){startMove(this,200);}}}function startMove(obj,iTarget){clearInterval(obj.timer);obj.timer=setInterval(function(){var speed=(iTarget-obj.offsetWidth)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(obj.offsetWidth==iTarget){clearInterval(obj.timer);}else{obj.style.width=obj.offsetWidth+speed+"px";}},30);}</script>

2、多物体透明度改变

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动画</title><style>body,div{margin:0;padding:0;}div{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;margin:10px;float:left;}</style></head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div></body></html>

<script type="text/javascript">window.onload=function(){var oDiv=document.getElementsByTagName('div');for(var i=0;i<oDiv.length;i++){oDiv[i].timer=null;oDiv[i].alpha=30;oDiv[i].onmouseover=function(){startMove(this,100);}oDiv[i].onmouseout=function(){startMove(this,30);}}}function startMove(obj,iTarget){clearInterval(obj.timer);//清除定时器obj.timer=setInterval(function(){//开定时器var speed=0;if(obj.alpha>iTarget){speed=-9;}else{speed=4;}if(Math.floor(Math.abs((obj.alpha-iTarget)/Math.abs(speed)))==0){clearInterval(obj.timer);obj.style.filter='alpha(opacity:'+iTarget+')';obj.style.opacity=iTarget/100;obj.alpha=iTarget;}else{obj.alpha+=speed;obj.style.filter='alpha(opacity:'+obj.alpha+')';obj.style.opacity=obj.alpha/100;}},30);}</script>

0 0