JavaScript animation effect (2) _javascript tips

In the previous article, I talked about the simple JavaScript animation effect, and this article mainly introduces some of the problems and solutions I found before I changed the code.

In the previous example of multiple-object width changes, we add code to it: border:4px solid #000; We found that after the mouse moved out, the width is not 200px, then how does this happen? Here we have a new example to analyze

HTML code:
<div id= "Div1" >hello</div>
CSS Code:
body,div{margin:0px; padding:0px;}
div{width:200px; height:200px background:red; border:1px solid #000;
JavaScript code:

Window.onload = function () {
  startmove ();    
}
function Startmove () {
  setinterval (function () {
    var odiv = document.getElementById (' Div1 ');
    ODiv.style.width = odiv.offsetwidth-1+ ' px ';
  },30
}

/* The effect at this time is increasing width
 * plus border:2px solid #000; Growing
 * Reason: The current width is 202, minus one after 201, greater than
 changes: odiv.offsetwidth-2
 * Results: Width is always 200px
 * Change: Word line style widened to 200px <div id= "Div1" style= "width:200px;" ></div>
 * Results: Change the value of border, you can get the effect of reduced width
 * Think: Using the GetStyle function * *
 

Here, we feel that there is a problem on the offsetwidth, we introduce the GetStyle function (which is compatible with IE and Firefox, respectively),

function GetStyle (obj,attr) {
  if (obj.currentstyle) {//ie return
  obj.currentstyle[attr];
}
  Else{//firefox return
    getComputedStyle (obj,false) [attr];
  }

Then we modify the ODiv.style.width = odiv.offsetwidth-1+ ' px ' code as follows:

ODiv.style.width = parseint (GetStyle (odiv, ' width ')) -1+ ' px ';

Here, the result is a diminishing effect. We continue to modify the code

In CSS:
div{font-size:12px;color: #fff;}
in javascript:
oDiv.style.fontSize = parseint (GetStyle (odiv, ' fontsize ')) +1+ ' px ';
at this point the effect is decreasing in width and the font is increasing. (The main front is to learn GetStyle usage)

Here we go back to the multiple object animation, we change the obj.offsetwidth in the previous code to parseint (GetStyle (obj, ' width '), where we look at the difference between them:

  We can see that parseint (obj, ' width ') appears several times, and we can assign parseint (GetStyle (obj, ' width ')) to variable icur, Then we get the effect is better, at this time the code is as follows:

<! DOCTYPE html>  

Here, a single animation effect is achieved, if we want the first Li to change the width, and the second Li to change the height, what should we do here?

Train of thought: Add ID to li inside, partial condition realizes, code: <li id= "Li1" ></li> <li id= "Li2" ></li>

Realize:

Window.onload = function () {var Li1 = document.getElementById (' li1 ');
  var Li2 = document.getElementById (' Li2 ');
  Li1.onmouseover = function () {startmove (this,400);
  } li1.onmouseout = function () {Startmove (this,100)} li2.onmouseover = function () {startMove1 (this,400); } li2.onmouseout = function () {startMove1 (this,200)}} function Startmove (obj,itarget) {clearinterval (o
  Bj.timer);
    Obj.timer = setinterval (function () {var icur = parseint (GetStyle (obj, ' height '));
    var speed = (itarget-icur)/10; Speed = speed>0?
    Math.ceil (Speed): Math.floor (speed);
    if (ITarget = = icur) {clearinterval (Obj.timer);
    } else{obj.style[' height ' = icur+speed+ ' px ';
  }},30)} function startMove1 (obj,itarget) {clearinterval (Obj.timer);
    Obj.timer = setinterval (function () {var icur = parseint (GetStyle (obj, ' width '));
    var speed = (itarget-icur)/10; Speed = speed>0?
    Math.ceil (Speed): Math.floor (speed); IfITarget = = icur) {clearinterval (Obj.timer);
    } else{obj.style[' width ' = icur+speed+ ' px ';
  }},30)} function GetStyle (obj,attr) {if (Obj.currentstyle) {//ie return obj.currentstyle[attr];
  else {return getComputedStyle (obj,false) [attr]; }
}

The effect here is that the mouse changes height at the first time, and at the second, the width is changed. And we found that there was a lot of repetition in the previous code, we still take the different parts out of the previous method, using the method of parameter to reach the same effect we want, (here is different width and height, we use a parameter attr to pass in), the code is as follows:

Window.onload = function () {
  var Li1 = document.getElementById (' li1 ');
  var Li2 = document.getElementById (' Li2 ');
  Li1.onmouseover = function () {
    startmove (this, ' height ',);
  }
  Li1.onmouseout = function () {
    startmove (this, ' height ', m)
  }
  li2.onmouseover = function () {
    Startmove (this, ' width ',);
  }
  Li2.onmouseout = function () {
    startmove (this, ' width ')
  }
}
       
function Startmove (obj,attr, ITarget) {
  clearinterval (obj.timer);
  Obj.timer = setinterval (function () {
    var icur = parseint (GetStyle (obj,attr));
    var speed = (itarget-icur)/10;
    Speed = speed>0? Math.ceil (Speed): Math.floor (speed);
    if (ITarget = = icur) {
      clearinterval (obj.timer);
    }
    else{
      obj.style[attr] = icur+speed+ ' px ';
    }
  },30)
}

Here, we're trying to change the transparency,

In CSS:
ul li{Filter:alpha (opacity:30); opacity:0.3;}

In javascript:

Window.onload = function () {
  var Li1 = document.getElementById (' li1 ');
  var Li2 = document.getElementById (' Li2 ');
  Li1.onmouseover = function () {
    startmove (this, ' opacity ', m);
  }
  Li1.onmouseout = function () {
    startmove (this, ' opacity ',)
  }
}

Strangely, there is no result that we want.

Reason: assumption 1: Width is generally integral type, and opacity value is 0-1; Suppose 2:opacity is not a unit

Modify 1: Add a judgment, when the incoming value is opacity, we execute the parsefloat, the code is as follows:

var icur = 0;
if (attr = = ' opacity ') {
  icur = parsefloat (GetStyle (obj,attr)) *100;
} else{
  icur = parseint (GetStyle (obj,attr));
}

Modify 2: Add one more judgment

if (ITarget = = icur) {
  clearinterval (obj.timer);
}
else{
if (attr = ' opacity ') {
  obj.style.filter = ' alpha (opacity: ' + (icur+speed) + ') ';
  Obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+ ' px ';
}
}

After the modification we can still find the problem in the browser, the opacity value is a little bit bigger than 1.

cause Analysis: The computer operation is not so accurate, there will be errors,

Modify: We add a math.round to the front, rounding the decimal part, the code is as follows

var icur = 0;
if (attr = = ' opacity ') {
  icur = Math.Round (parsefloat (GetStyle)) obj,attr);
else{
  icur = parseint (GetStyle (obj,attr));
}

In this way, our results are basically complete, the entire code is as follows:

<! DOCTYPE html>  

In this way, we can change any value of our motion.

In fact, not unconsciously, has been a simple animation encapsulation, to get a simple JavaScript animation library. Later, we will continue to complement our JavaScript library.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.