Javascript _ javascript tips

This article mainly introduces how js achieves multiple motion effects on the same page. it involves javascript techniques for operating the motion effects of page elements and is of great practical value, for more information about how to implement multiple motion effects on the same page in JavaScript, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

The implementation principle is to add events to these five elements and loops during the call. Note that the timers of each element must be separated.

Key aspect 1:

var speed = (target - obj.offsetWidth)/8;

The buffering effect starts quickly and then slows down until it stops.

speed = speed>0?Math.ceil(speed):Math.floor(speed);

If the speed is greater than 0, it is rounded up. if the speed is smaller than 0, it is rounded down.

Key aspect 2:

if(obj.offsetWidth == target){clearInterval(obj.timer);}else{obj.style.width = obj.offsetWidth+speed+"px";}

If the element width is equal to the target value, turn off the timer. Otherwise, the width continues to increase.

Key aspect 3:

For (I = 0; I
 
  

  
Each element is added with its own timer attribute, its mouse events, and motion functions are called in the mouse events.
  
Finally, run the following code:
  

  
   Untitled DocumentScript window. onload = function () {var runs = document. getElementById ("runs"); var runs_li = runs. getElementsByTagName ("li"); var I = 0; for (I = 0; I
   
    
0? Math. ceil (speed): Math. floor (speed); if (obj. offsetWidth = target) {clearInterval (obj. timer);} else {obj. style. width = obj. offsetWidth + speed + "px";} document. title = obj. offsetWidth + ',' + target;}, 30);} script
    
  
 
     
   
1
 
     
   
2
 
     
   
3
 
     
   
4
 
     
   
5
    
  
   
  

  
I hope this article will help you design javascript programs.