Example code sharing of javascript motion framework

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)
            }
}

Playing with the code, we can find that the width should be decreasing all the time, but what? On the contrary, it has increased. Why is this?

It turns out that there are these problems with the offset series attributes. Let’s correct them below.

1. currentStyle is the current style, but it is not compatible with Google and Firefox

2. getComputedStyle is the calculated style and is not compatible with ie8--

The specific code is as follows:

The passed parameter obj refers to the obtained object, and name is the style attribute

function getStyle(obj,name){
                                                                                      using use using use using ”             use ’ s ’s ’ s ’ s ’ s ’ s through through ’s ’ s ‐ ‐ ‐‐‐ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ to ​}else{
                                                                                                                                                                                                        ’, In the next step, we need to evolve the move function.

We need to change the start distance from var start = obj.offsetLeft; to var start = parseFloat(getStyle(obj,name));

Because getStyle(obj,name) obtains a string, you need to use parseFloat to convert the type

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){

return obj.currentStyle[name];//Not compatible with Google and Firefox

}else{
//getComputedStyle: calculated style
return getComputedStyle(obj,false)[name];//Not compatible with IE8--
}
}
function move(obj,name,target,dur){
var count = parseInt(dur/ 30);//Total times
var start = parseFloat(getStyle(obj,name));//Starting distance
var dis = target - start;//Distance
//Step
var step = dis/count;
var n = 0;//Current step number
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)
}
}


Also learned before Fade in and out, we can do this with transparency, so how to do it?

First of all, you need to determine whether there is an opacity attribute. If so, you need to use transparency * 100, because transparency is a decimal. Otherwise, continue to use the default.

if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';

}else{

obj.style[name] = cur +'px';

}

The above code can only move in one direction, but I want to go down first 500, and then go left 100, what do you do?

I have learned about callback functions before. If I pass a callback function to him, is it okay?

When moving to the destination, determine whether there is a callback function. If there is, it will be executed, otherwise it will not be 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){

return obj.currentStyle[name];//Not compatible with Google and Firefox

}else{

//getComputedStyle: calculated style
return getComputedStyle(obj,false)[name];//Not compatible with IE8--
}
}
function move(obj,name,target ,dur,fn){
var count = parseInt(dur/30);//Total number of times
var start = parseFloat(getStyle(obj,name));//Starting distance
var dis = target - start;//Distance
// Step length
// var step =dis/count;
var n = 0;//Current step number

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);
})
}
}

待绝....

The above is the detailed content of Example code sharing of javascript motion framework. For more information, please follow other related articles on the PHP Chinese website!