JavaScript motion framework sample code sharing for arbitrary value movement of multiple objects (3)

This article mainly introduces the third part ofJavaScriptMotionFrameworkin detail, multi-object arbitrary value movement, which has certain reference value. Interested friends You can refer to the

The previous two articles are about the movement of a single object. This article starts to talk about the movement of multiple objects, such as the differentattributes of multiple pssuch as width, height, font size, Buffer motion changes for transparency.

Starting from this article, offsetWdith, offsetHeight, etc. will no longer be used, because problems will occur. For example, adding a border, offsetWidth will cause serious problems. See the 'bug' of offsetWidth in JavaScript on my personal blog. The countermeasure and solution is to encapsulate the getStyle(obj, attr) function and use it to obtain the current value in motion!

function getStyle(obj, name) { if(obj.currentStyle) {//IE return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }

Since each object moves independently, somevariablescannot be shared between them, such asTimer, eachobjectIt should have its own timer, because every time the timer is started, the previous timer must be cleared first. This means that if the first object is still moving, the mouse is moved to the second object and the previous timer is cleared instantly. The controller causes the movement of the first object to stop when it cannot reach the target value

In addition, there are basically two types of object movement styles: one is the size, which is the attribute in px. , and another category is transparency!

      
  
变高
 
变宽
 
fontSize Changed
 
alpha
   

The above is the detailed content of JavaScript motion framework sample code sharing for arbitrary value movement of multiple objects (3). For more information, please follow other related articles on the PHP Chinese website!