Example code sharing of javascript motion framework

零下一度
Release: 2017-06-24 14:37:33
Original
1245 people have browsed it

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

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!