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
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+')';
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!