Javascript multi-object arbitrary motion frame

Javascript multi-object arbitrary motion frame

Each complex motion effect is composed of a simple effect. We can develop a framework for a simple effect, that is, to write a general function, so that we can transform any attribute of the element, complex effects can be easily achieved.

Note:

When you change the transparency of an element, special processing is required. If you change the width of an element, for an element with a border, if we use obj. when offsetWidth is used to obtain the element width, an error occurs because offsetWidth includes the border. If the border is 1px, called in the timer function, obj. style. width = obj. offsetWidth-1 + 'px ';, we will find that the width of the element is not reduced, but will increase. This is also why we use our custom getStyle () to get the element width, instead of using the offsetWidth attribute.

 New Web Project<Script> function getStyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} else {return getComputedStyle (obj, null) [name];} window. onload = function () {var objs = document. getElementsByTagName ('div '); objs [1]. onmouseover = function () {startMove (this, 'width', 400) ;}; objs [1]. onmouseout = function () {startMove (this, 'width', 200) ;}; objs [0]. onmouseover = function () {startMove (this, 'height', 400) ;}; objs [0]. onmo Useout = function () {startMove (this, 'height', 200) ;}; objs [2]. onmouseover = function () {startMove (this, 'opacity ', 100) ;}; objs [2]. onmouseout = function () {startMove (this, 'opacity ', 30) ;};}; function startMove (obj, atrr, itarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {var nowValue; if (atrr = 'opacity ') {nowValue = Math. round (parseFloat (getStyle (obj, atrr) * 100); // an error occurs in the computer operation. You need to take the approximate document. title = nowValue;} Else {nowValue = parseInt (getStyle (obj, atrr);} var speed = (itarget-nowValue)/5; speed = speed> 0? Math. ceil (speed): Math. floor (speed); if (nowValue = itarget) {clearInterval (obj. timer);} else {if (atrr = 'opacity ') {obj. style [atrr] = (nowValue + speed)/100; obj. style. filter = 'Alpha (opacity: '+ (nowValue + speed) +') '; // IE earlier version settings} else {obj. style [atrr] = nowValue + speed + 'px ';}}, 30) ;}</script>

Run: