JavaScript实现多个物体同时运动
本文实例为大家分享了JavaScript实现多个物体同时运动的具体代码,供大家参考,具体内容如下
1、多个物体同时运动
---例子:多个Div,鼠标移入变宽
单定时器,存在问题
每个Div一个定时器
2、多物体运动框架
定时器作为物体的属性
参数的传递:物体、目标值
---例子:多个Div淡入淡出
所有东西都不能公用
属性与运动对象绑定:速度、其他属性值(如透明度等)
3、多个Div,鼠标移入变宽的例子
3.1代码
多物体运动框架 div{ width:100px; height:50px; background:red; margin-top:50px; } window.onload=function(){ //获取元素 varaDiv=document.getElementsByTagName("div"); for(vari=0;i 0?Math.ceil(iSpeed):Math.floor(iSpeed); //运动和停止的判断条件 if(obj.offsetWidth==iTarget){ //清楚定时器函数 clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+iSpeed+'px'; } },30); }
3.2多个DIV淡入淡出的例子
多物体运动框架 div{ width:100px; height:100px; background:red; margin-top:50px; filter:alpha(opacity:30); opacity:0.3; } window.onload=function(){ //获取元素 varaDiv=document.getElementsByTagName("div"); for(vari=0;i 0?Math.ceil(iSpeed):Math.floor(iSpeed); //运动和停止的判断条件 if(obj.alpha==iTarget){ //清楚定时器函数 clearInterval(obj.timer); }else{ obj.alpha+=iSpeed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。