javascript多物体运动实现方法分析
更新时间：2016年01月08日 11:48:03 作者：lostyu
这篇文章主要介绍了javascript多物体运动实现方法,结合实例形式分析了JavaScript多物体运动的相关注意事项与具体实现代码,包含四个div块的横向、竖向移动,颜色与边框渐变效果,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
下面小编就为大家分享一篇浅谈webpack打包过程中因为图片的路径导致的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
解决在Bootstrap模糊框中使用WebUploader的问题
这篇文章主要介绍了在Bootstrap模糊框中使用WebUploader的问题及解决方法，,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了新手快速入门JavaScript装饰者模式与AOP,在不改变对象）的情况下动态的为其添加功能,这就是装饰者模式，下面小编带大家来深入学习一下吧2019-06-06
滚动至页顶，比以前的直接跳到页顶效果好很多，正的很不错2008-09-09
这篇文章主要介绍了JS数组Reduce方法功能与用法,结合实例形式详细分析了JS数组Reduce方法操作数组统计、去重等相关操作技巧,需要的朋友可以参考下2020-04-04
最近在做一个列表的时候，涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例，分享给大家，感兴趣的可以了解一下2021-07-07
下面小编就为大家带来一篇判断颜色是否合法的正则表达式(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
在javascript中，String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力，这里简单介绍下，方便需要的朋友2013-12-12
jstree创建无限分级树的方法【基于ajax动态创建子节点】
这篇文章主要介绍了jstree创建无限分级树的方法,结合实例形式分析了jstree基于ajax结合asp.net后台动态创建子节点实现无限分级树效果的相关步骤与操作技巧,需要的朋友可以参考下2016-10-10
详解Javascript中document.execCommand()的用法以及指令参数列表
execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。在HTML5中，execCommand可以通过JavaScript代码来调用，使得开发者可以在网页中实现一些复杂的文本操作。在HTML编辑器中这个命令用得很多，酷炫的强大功能。2023-07-07
最新评论