Analysis of JavaScript multi-object motion implementation methods

Analysis of JavaScript multi-object motion implementation methods_javascript skills

WBOY

Release： 2016-05-16 15:21:01

Original

1578 people have browsed it

The example in this article describes the implementation method of multi-object movement in JavaScript. Share it with everyone for your reference, the details are as follows:

It should be noted here: The timer of each moving object is independent as an attribute of the object and does not affect each other. The attributes are bound to the moving object and cannot be shared .

The screenshot of the running effect is as follows:

Example:

<!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 &#63; 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>

Copy after login

For more content related to JavaScript motion effects, please view the special topic on this site: " Summary of JavaScript motion effects and techniques"

I hope this article will be helpful to everyone in JavaScript programming.