本文实例为大家分享了JavaScript实现多个物体同时运动的具体代码,供大家参考,具体内容如下
<强> 1,多个物体同时运动
, - - -例子:多个Div,鼠标移入变宽
,单定时器,存在问题
,每个Div一个定时器
<强> 2,多物体运动框架
定时器作为物体的属性
参数的传递:物体,目标值
,推荐- - - - - -才能例子:多个Div淡入淡出
:速度,其他属性值(如透明度等)
<强> 3,多个Div,鼠标移入变宽的例子
3.1代码
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>多物体运动框架& lt;/title>
& lt;风格类型=" text/css "比;
div {
宽度:100 px;
高度:50 px;
背景:红色;
margin-top: 50 px;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {//获取元素
var aDiv=document.getElementsByTagName (" div ");
(var=0;我& lt;aDiv.length;我+ +){
aDiv[我]。onmousemove=function () {
startMove (300);
}
aDiv[我]。onmouseout=function () {
startMove (100);
}
}
}//运动函数
函数startMove (obj iTarget) {//清楚定时器函数//由于是是适应于多个对象的变化,所以每个DIV有一个定时器
clearInterval (obj.timer);//定时器函数//每一个对象,有一个定时器
obj。计时器=setInterval(函数(){//记录速度
var哲学=(iTarget - obj.offsetWidth)/5;
哲学=哲学比;0 & # 63;Math.ceil(哲学):Math.floor(哲学);//运动和停止的判断条件
如果(obj。offsetWidth==iTarget) {//清楚定时器函数
clearInterval (obj.timer);
其他}{
obj.style。宽度=obj。offsetWidth +哲学+“px”;
}
},30);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt;/body>
3.2多个DIV淡入淡出的例子
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>多物体运动框架& lt;/title>
& lt;风格类型=" text/css "比;
div {
宽度:100 px;
身高:100 px;
背景:红色;
margin-top: 50 px;
过滤器:α(不透明度:30);
透明度:0.3;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {//获取元素
var aDiv=document.getElementsByTagName (" div ");
(var=0;我& lt;aDiv.length;我+ +){//将α作为,物体的一个属性
aDiv[我]。α=30;
aDiv[我]。onmousemove=function () {
startMove (100);
}
aDiv[我]。onmouseout=function () {
startMove (30);
}
}
}//运动函数
函数startMove (obj iTarget) {//清楚定时器函数
clearInterval (obj.timer);//定时器函数
obj。计时器=setInterval(函数(){//记录速度
var哲学=(iTarget - obj.alpha)/8;
哲学=哲学比;0 & # 63;Math.ceil(哲学):Math.floor(哲学);//运动和停止的判断条件
如果(obj。α==iTarget) {//清楚定时器函数
clearInterval (obj.timer);
其他}{
obj。α+=哲学;
obj.style。过滤器='α(不透明度:' + obj。α+ ')';
obj.style。不透明度=obj。α/100;
}
},30);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt;/body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
