Javascript can be a large frame at the same time a series of effect motion frame-line Analysis code, let you easily the principle of motion

Waiting for a long time can be a large frame, such as a series of effects motion frame, is now a preliminary version, to meet the needs. Let's see how it's achieved.

We know in JavaScript that '. ' Equivalent to ' [] ' For example: odiv.style.height=odiv.style[' height ']

So, let's move the property as a parameter and pass it to the previous function.

Transparency, need to be dealt with alone, can be judged.

directly on the code.

<styletype= "Text/css">Div{width:200px;Height:200px;margin:20px;float: Left;background:Yellow;Border:1px solid #CCCCFF;Filter:Alpha (opacity=30);Opacity:0.3;            }        </style>

< Body >        <  ID= "Div1"></div>    </  Body>

Here's the JavaScript code:

<script type= "Text/javascript" >window.onload=function() {                varODIV1 = document.getElementById ("Div1"); Odiv1.onmouseover=function() {Startmove ( This, ' opacity ', 100);                }; Odiv1.onmouseout=function() {Startmove ( This, ' opacity ', 30);            }; }            functionGetStyle (obj, name) {if(obj.currentstyle) {returnObj.currentstyle[name]; } Else {                    returngetComputedStyle (obj,NULL) [name]; }            }            functionstartmove (obj, attr, itarget) {clearinterval (obj.time); Obj.time= SetInterval (function() {                    varCur = 0; if(attr = = ' opacity ') {cur=parsefloat (GetStyle (obj, attr)) * 100; } Else{cur=parseint (GetStyle (obj, attr)); }                    varSpeed = (itarget-cur)/6; speed= Speed > 0?Math.ceil (Speed): Math.floor (speed); if(cur = =itarget) {Clearinterval ( This. Time); } Else {                        if(attr = = ' opacity ') {Obj.style.filter= ' Alpha (opacity= ' + cur + speed + ') '; Obj.style.opacity= (cur + speed)/100; } Else{obj.style[attr]= cur + speed + ' px '; }                    }                }, 30); }        </script>

In combination with the knowledge in the previous blog post, I believe that some of the computational principles inside are well-known, needless to say. I don't know how to review the previous article.

So so far this motion frame is no problem?

Don't worry about this or there is a problem in the IE7 under the bug will appear. What's going on?

In fact, the operation in JavaScript is error, alert (0.07*100); 7.000000000....1

Then the parsefloat (GetStyle (obj, attr)) * 100 in our code will have an error.

How to solve this problem??

Actually very simple, with math.round (); get rid of the corresponding code

Cur=parsefloat (GetStyle (obj, attr)) * 100;

Change to cur = Math.Round (parsefloat (GetStyle (obj, attr)) * 100); Can

The principle is to kill the decimal, leaving the part of the integer.

Javascript can be a large frame at the same time a series of effect motion frame-line Analysis code, let you easily the principle of motion