javascript多物体运动实现方法分析
本文实例讲述了javascript多物体运动实现方法。分享给大家供大家参考，具体如下：
这里需要注意：每个运动物体的定时器作为物体的属性独立出来互不影响，属性与运动对象绑定，不能公用。
运行效果截图如下：
例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物体运动</title>
<style>
div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function()
{
var aDiv = document.getElementsByTagName('div');
aDiv[0].onmouseover = function()
{
startMove(this, 'width', 300);
};
aDiv[0].onmouseout = function()
{
startMove(this, 'width', 100);
};
aDiv[1].onmouseover = function()
{
startMove(this, 'height', 300);
};
aDiv[1].onmouseout = function()
{
startMove(this, 'height', 100);
};
aDiv[2].onmouseover = function()
{
startMove(this, 'opacity', 100);
};
aDiv[2].onmouseout = function()
{
startMove(this, 'opacity', 30);
};
aDiv[3].onmouseover = function()
{
startMove(this, 'borderWidth', 20);
};
aDiv[3].onmouseout = function()
{
startMove(this, 'borderWidth', 1);
};
};
function getStyle(obj, attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iCur = 0;
if(attr == 'opacity'){
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
}else{
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == iTarget){
clearInterval(obj.timer);
}else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍Javascript 多物体运动的实现，包括了Javascript 多物体运动的实现的使用技巧和注意事项，需要的朋友参考一下 我们先来看下之前的运动的代码，是否支持多物体运动，会出现怎么样的问题。 以下是Javascript 代码： 此时当鼠标移入到第一个div 时，他是正常运行的。但是如果现在又移动到第二个或者第三个div时候就会出现bug。 image 这个是什么原因呢？ 看图可
-
本文向大家介绍javascript匀速运动实现方法分析，包括了javascript匀速运动实现方法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考，具体如下： 匀速运动步骤： 1. 清除定时器 2. 开启定时器 3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续 匀速运动停止条件：距离足够近 Math.abs(当
-
本文向大家介绍JS多物体实现缓冲运动效果示例，包括了JS多物体实现缓冲运动效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS多物体实现缓冲运动效果的方法。分享给大家供大家参考，具体如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、
-
本文向大家介绍JavaScript缓冲运动实现方法(2则示例)，包括了JavaScript缓冲运动实现方法(2则示例)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript缓冲运动实现方法。分享给大家供大家参考，具体如下： 实现原理：(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小，运动距离和速度成反比) 需要注意：当计算出来的速度有小数时需要取整； 例子1：
-
本文向大家介绍python+opencv实现动态物体识别，包括了python+opencv实现动态物体识别的使用技巧和注意事项，需要的朋友参考一下 注意：这种方法十分受光线变化影响 自己在家拿着手机瞎晃的成果图： 源代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍javascript实现行拖动的方法，包括了javascript实现行拖动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下： 希望本文所述对大家的javascript程序设计有所帮助。