javascript多物体运动实现方法分析

2019-11-20 10:50:07

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jquery实现简单的遮罩层

下一篇：jQuery插件之Tocify动态节点目录菜单生成器附源码下载