JavaScript motion Framework (ii)

Immediately after the above ...

Add a border to the Div, border:1px solid black

Window.onload = function () {
var div = document.getElementById (' Div1 ');

Div.onclick = function () {
SetInterval (function () {
Div.style.width = div.offsetwidth-1+ ' px '
},30)
}
}

Knocking on the code we can see that the width should be always minus, but what. Instead of increasing, what is this for?

Originally about the offset of these series of properties will have these problems, the following to correct

1, Currentstyle is the current style, but not compatible with Google and Firefox

2, getComputedStyle is calculated after the style, incompatible ie8--

The specific code is as follows:

The passed parameter, obj, refers to the obtained object, name is the Style property

function GetStyle (obj,name) {
Currentstyle: The current style
if (Obj.currentstyle) {
returnobj.currentstyle[name];//not compatible with Google and Firefox
}else{
getComputedStyle: Calculated Style
Return getComputedStyle (obj,false) [name];//incompatible ie8--
}
}

Next we need to evolve the move function,

The distance starting from var start = Obj.offsetleft need to be changed to var start = parsefloat (GetStyle (obj,name));

Because GetStyle (obj,name) Gets a string, you need to use the parsefloat conversion type

The specific code is as follows

<script type= "Text/javascript" >
Window.onload = function () {
var odiv = document.getElementById (' Div1 ');
var timer;
function GetStyle (obj,name) {
Currentstyle: The current style
if (Obj.currentstyle) {
returnobj.currentstyle[name];//not compatible with Google and Firefox
}else{
getComputedStyle: Calculated Style
Return getComputedStyle (obj,false) [name];//incompatible ie8--
}
}
function Move (Obj,name,target,dur) {
var count = parseint (DUR/30);//total number of times
var start = parsefloat (GetStyle (Obj,name));//Start distance
var dis = target-start;//distance
Step
var step = Dis/count;
var n = 0;//Current number of steps
Timer = setinterval (function () {
n++;
Obj.style[name] = start+ n*step + ' px ';
if (n = = count) {
Clearinterval (timer)

}

},30)
}
Odiv.onclick = function () {

Move (odiv, ' width ', 800,1000)
}
}
</script>

We've also learned to fade in and out, which we can do with transparency, so what do we do?

First, you need to determine whether there is opacity this property, if any, you need to use transparency *100, because transparency is a decimal. Otherwise, continue using the default.

if (name = = ' opacity ') {
Obj.style[name] = cur;
Obj.style.filter = ' alpha (' +cur*100+ ') ';
}else{
Obj.style[name] = cur + ' px ';
}

The code above can only move from one direction, but I want to go down 500 and then go 100 to the left.

Have you ever learned the callback function, if you send him a callback function, is it possible?

When moving to the destination, the judgment is whether there is a callback function. If one is executed, the other is not executed.

The specific code is as follows

Window.onload = function () {
var odiv = document.getElementById (' Div1 ');
var timer;
Function GetStyle (obj,name) {
//currentstyle: Current style
if (obj.currentstyle) {
returnobj.currentstyle[ name];//is not compatible with Google and Firefox
}else{
//getcomputedstyle: Calculated style
return getComputedStyle (obj,false) [name];//incompatible ie8--
}
}
Function Move (OBJ,NAME,TARGET,DUR,FN) {
var count = parseint (DUR/30);//total times
var start = parsefloat ( GetStyle (Obj,name));//start distance
var dis = target-start;//distance
//step
//var step =dis/count;
var n = 0;//Current number of steps

Timer = setinterval (function () {
n++;
var cur = start + n*dis/count;
if (name = = ' opacity ') {
Obj.style[name] = cur;
Obj.style.filter = ' alpha (' +cur*100+ ') ';
}
Obj.style[name] = cur + ' px ';
if (n = = count) {
Clearinterval (timer)
fn && fn ();
}

},30)
}

Odiv.onclick = function () {

Move (Odiv, ' top ', 500,3000,function () {
Move (Odiv, ' left ', 100,500);
})
}
}
</script>

Cond....

JavaScript motion Framework (ii)