Of Stack

Example of of with elastic motion

  • 2020-11-26 18:42:58
  • OfStack

This paper summarizes the knowledge points related to JS sports. To share for your reference, the details are as follows:

1. Multi-object motion frame. Everything cannot be Shared

The output frequency should not be too high

3. Try to avoid writing decimals when writing JS, because the inside of the computer is simulated rather than actually stored

For example, 0.07*100 is not 7 in the JS operation 


var a=3;
var b=3.00000000000000000001;
alert(a=b);

The output is true

4. When writing a program, think first about 1, then about the special. When writing a program, exclude the special, then write 1 


if( special 1)
{}
else if( special 2)
{}
else
{
 1 a 
}

5. Arrays can be loosed using for or for.. in loops, since for loops are more manageable, for loops are better

Object (json) can only be used with for.. in cycle

6. In CSS *{margin:0; padding:0; The performance of this writing is not very good

7. Layout transformation: set left,top values for each element, and set absolute for each element position and margin to zero after all Settings are set

8. When IE7 USES UL for exercise, it will fail. In this case, you can try DIV

9. Consider friction iSpeed*0.95(decimal depends on friction)

10. Acceleration: the further away from the target, the greater the acceleration, and the closer to the target, the smaller the acceleration (iTarget-ES56en.ES57en) /50

11. A better combination of acceleration and friction is 5 and 0.7, that is, iSpeed+=(ES61en-ES62en.offsetLeft)/5; iSpeed * = 0.7;

12. When something goes wrong with a program, think about why it happened

13. Elastic motion should not be used when styles do not cross boundaries

14. Elastic motion stopping condition: too close range and too small speed

15. The analysis should be viewed, because the style will automatically ignore decimals, so in order not to let the missing decimals add up, you can set a variable to store them and assign them to the style. obj.style.left=left+"px";

Attached: an example of JavaScript elastic motion

Principle of motion: accelerated motion + decelerated motion + frictional motion;

The code is as follows: 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Untitled document </title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  iSpeed += (iTarget - obj.offsetLeft)/5;
  iSpeed *= 0.7;
  left += iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
   clearInterval(obj.timer);
   obj.style.left = iTarget + 'px';
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value=" movement " />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>

For more information on the effects of JavaScript, please visit the website: Summary of The Effects and Techniques of JavaScript

I hope this article has been helpful in JavaScript programming.

Related articles: