The way to get the style of the buffer animation and multi-object animation of JS animation

First, buffer animation
Ps1:opacity: All browsers support the Opacity property.
Note: IE8 and earlier versions support the alternative Filter property. For example: Filter:alpha (opacity=50).
PS2: The speed value of the buffer movement must be converted to an integer, otherwise it will not reach the end, is to use Math.ceil (), or Math.floor (), to see the situation.
PS3: Animation approximate template (IDEA):
Window.onload = function () {
var odiv = document.getElementById ("Div1");
Odiv.onmouseover = function () {
Startmove (0);
}
Odiv.onmouseout = function () {
Startmove (-200);
}
}
var timer=null;
function Startmove (itarget) {
Clearinterval (timer);
var odiv = document.getElementById ("Div1");
Timer=setinterval (function () {
var speed= (itarget-odiv.offsetleft)/20;
Speed=speed>0? Math.ceil (Speed): Math.floor (speed);
if (odiv.offsetleft==itarget) {
Clearinterval (timer);
}
else{
odiv.style.left=odiv.offsetleft+speed+ "px";
}
},30)
}

Second, multi-object movement
For loop to add an event for each tagnamelist[i] and add properties to differentiate the respective timers (for cancellation)
Use this in the parameter to specify the current element of the selection
Multiple objects do not share a value, define a separate property hold value on the object
When there are multiple common values, and this value changes, it is best to assign the value individually to avoid contention.

Window.onload=function () {
var ali=document.getelementsbytagname ("Li");
for (Var i=0;i<ali.length;i++) {
Ali[i].timer=null;
Ali[i].onmouseover=function () {
Startmove (this,400);
}
Ali[i].onmouseout=function () {
Startmove (this,200);
}
}
}
function Startmove (obj,itarget) {
Clearinterval (Obj.timer)
Obj.timer=setinterval (function () {
var speed= (itarget-obj.offsetwidth)/8;
Speed=speed>0? Math.ceil (Speed): Math.floor (speed);
if (obj.offsetwidth==itarget) {
Clearinterval (Obj.timer)
}
else{
obj.style.width=obj.offsetwidth+speed+ "px";
}
},30)
}

Third, get the style
1. Procedure: Obj.stlye.width is the width of the block in the style, and obj.offsetwidth is the width of the display (including border), so obj.style.width=obj.offsetwidth-1= Obj.style.width+borderwidth-1, when the borderwidth>1, in fact, this is in addition width rather than reduce width;
2. The prototype is parseint (string s, [int radix]), which parses a string and returns an integer. and parsefloat, parse a string and return a floating-point number;
3. Use the JS Style property to get the style of the HTML tag, but you cannot get the non-inline style. That is: use document.getElementById (' element '). Style.xxx can get style information for an element, but it gets only the style rules in the DOM element style property, and the external style sheet referenced by the class attribute will not get the information we want. So JS with Currentstyle and getComputedStyle to get CSS non-inline style;
3.var style = window.getComputedStyle ("element", "Pseudo-Class"), second parameter "Pseudo-class" (if not pseudo-class, set to null)
function GetStyle (Obj,style) {//reference when style is quoted
if (Obj.currentstyle) {
return Obj.currentstyle[style];
}else{
Return getComputedStyle (Obj,null) [style];
}
}
Style: Standard styles! can be used to query the style specified by the HTML tag's style property.
Currentstyle: Can be used to query/modify styles in an external or internal style sheet (ie, Opera only). Represents the object format and style specified in the Global style sheet, inline style, and HTML tag properties. When using Currentstyle to determine the condition is, to add body,document.body.currentstyle, so as to be compatible with the ie6,7.
Runtimestyle: Run-time style! If the properties of the style overlap, the properties of the style are overwritten. Represents the format and style of an object on top of the formatting and styles specified by the global style sheet, inline style, and HTML tag properties.
getComputedStyle: For Firefox, Chrome, Safari, opera and other browsers, the role and currentstyle the same.

Currentstyle refers to the browser is currently displayed, if you write a new style with Runtimestyle, then the new style is the highest weight, the value of Currentstyle is also changed to a new style, so it can be said that Currentstyle is a style and The combination of Runtimestyle. That is, the runtime is Runtimestyle, otherwise it is style or currentstyle.

JS Animation buffer animation and multi-object animation is the way to get style