javascript多物体运动实现方法分析
2016-01-08 00:00
966 查看
本文实例讲述了javascript多物体运动实现方法。分享给大家供大家参考,具体如下:
这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用。
运行效果截图如下:
例子:
更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
JavaScript拖拽、碰撞、重力及弹性运动实例分析
纯js模拟div层弹性运动的方法
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
javascript运动框架用法实例分析(实现放大与缩小效果)
javascript匀速运动实现方法分析
JavaScript缓冲运动实现方法(2则示例)
js运动应用实例解析
js简单实现点击左右运动的方法
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程序设计有所帮助。
您可能感兴趣的文章:
JS运动相关知识点小结(附弹性运动示例)JavaScript拖拽、碰撞、重力及弹性运动实例分析
纯js模拟div层弹性运动的方法
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
javascript运动框架用法实例分析(实现放大与缩小效果)
javascript匀速运动实现方法分析
JavaScript缓冲运动实现方法(2则示例)
js运动应用实例解析
js简单实现点击左右运动的方法
javascript弹性运动效果简单实现方法
相关文章推荐
- javascript运动框架用法实例分析(实现放大与缩小效果)
- javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
- javascript弹性运动效果简单实现方法
- js实现对ajax请求面向对象的封装
- 学习JavaScript设计模式之状态模式
- javascript正则表达式定义(语法)总结
- JavaScript拖拽、碰撞、重力及弹性运动实例分析
- jsPlugin 解决Table中值相同的列进行rowlSpan合并
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- 学习Javascript闭包(Closure)
- js基础学习笔记1
- 关于javascript的回调函数与异步函数的关系理解
- JavaScript字典
- 《JavaScript高级程序设计》第14、17、20章
- 2016值得关注的语言平台、JS框架
- JavaScript:理解ondrag
- JavaScript设计模式 --- 单体模式
- 转载 javascript节点的操作 创建、添加、移除、移动、复制
- js 遍历对象
- javascript之复习(css属性值的计算)