Shulou(Shulou.com)06/03 Report--

Editor to share with you the JavaScript motion frame of many objects arbitrary value movement example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

The motion of multiple objects, such as buffering motion changes with different properties of multiple div, such as width, height, font size, and transparency.

This article will not use offsetWdith,offsetHeight and so on, because there will be problems, such as adding a border,offsetWidth will lead to serious problems, see my personal blog JavaScript offsetWidth's' bug' and its solution is to encapsulate the getStyle (obj, attr) function, using to get the current value in the motion!

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

Since each object moves separately, some variables cannot be shared between them, such as a timer. Each object should have its own timer, because each time the timer is started, the previous timer has to be cleared first. This leads to if the first object is still moving, move the mouse to the second object and instantly clear the last timer, causing the movement of the first object to stop when it cannot reach the target value.

In addition, the style of object motion, basically two types: one is the size, that is, the px as a unit of attributes, and the other is transparency!

Motion frame (3): multi-object motion div {width: 100px; height: 100px; background: yellow; margin: 10px; float: left; filter: alpha (opacity:100); opacity:1;} height and width fontSize Changed alpha var doc = document; var oDiv1 = doc.getElementById ('div1'); oDiv1.onmouseover = function () {startMove (this,' height', 300);}; oDiv1.onmouseout = function () {startMove (this, 'height', 100);} Var oDiv2 = doc.getElementById ('div2'); oDiv2.onmouseover = function () {startMove (this,' width', 300);}; oDiv2.onmouseout = function () {startMove (this, 'width', 100);}; var oDiv3 = doc.getElementById (' div3'); oDiv3.onmouseover = function () {startMove (this, 'fontSize', 30);}; oDiv3.onmouseout = function () {startMove (this,' fontSize', 16);}; var oDiv4 = doc.getElementById ('div4') ODiv4.onmouseover = function () {startMove (this, 'opacity', 30);}; oDiv4.onmouseout = function () {startMove (this,' opacity', 100);}; function getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr];} else {return getComputedStyle (obj, null) [attr];}} function startMove (obj, attr, iTarget) {clearInterval (obj.timer); obj.timer = setInterval (function () {var cur = 0) If (attr = = 'opacity') {cur = parseFloat (getStyle (obj, attr)) * 100;} else {cur = parseInt (getStyle (obj, attr));} var speed = (iTarget-cur) / 10; speed = speed > 0? Math.ceil (speed): Math.floor (speed); if (iTarget = = cur) {clearInterval (obj.timer);} else {if (attr = = 'opacity') {cur + = speed; obj.style.filter =' alpha (opacity:' + cur +')'; obj.style.opacity = cur / 100 bump Firefox & & Chrome} else {cur + = speed; obj.style [attr] = cur + 'px';}, 30);}

The above is all the contents of the article "example Analysis of arbitrary value Motion of many objects in JavaScript Motion frame". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.