Yesterday we talked about the common compatibility writing methods in native JS. Today we will talk about the sports framework.
Under normal circumstances, we would use such a plug-in to write a motion effect. This thing is not written by ordinary people, because the motion effects involved are calculated through a bunch of mathematical functions. We ordinary people cannot write it. We just encapsulate a motion framework ourselves. If there are any problems, it is convenient to modify it. Let’s start encapsulating it.
First, let’s write a div and set some simple styles. Let’s use this div as an example.
The following code:
#div{
width: 100px;
height: 100px;
background: gold;
position: absolute;
left:0;
top:0;
opacity: 1;
}
Then we start writing js code, as follows:
=function() {
var oDiv = ("div");
var timer;
Write a function, which is convenient for calling it directly when you use it in the future. First, pass in a few parameters (the object to move, the property to change, the end point distance, the total time to move, the callback function)----Today's thing is just a simple encapsulation, and you can also write to pass in a json
function move(obj,name, target, dur,fn) {
// Total steps = Total time ÷ Time set by the timervar count = parseInt(dur / 30);
// Start positionvar start = parseFloat(setStyle(obj,name));
// Total distance = incoming distance - starting distancevar dis = target - start;
// The distance of each step of movement = total distance ÷ total number of stepsvar spen = dis / count;
// Define the number of start stepsvar n = 0;
timer = setInterval(function () {
n++;
// Save the current position of movementvar cur=start + n * spen;
// Determine whether the attribute is transparent, no unit is needed to be added to the transparencyif(name=='opacity'){
[name]=cur;
// Compatible with low IE versions, IE's transparency is 1 to 100='alpha('+cur*100+')';
}else {
[name] = start + n * spen + "px";
}
// Determine whether the movement is completedif (n == count) {
// Clear the timer after completion and stop the movementclearInterval(timer);
// Determine whether the user passes in a callback functionfn && fn();
};
}, 30);
};
Then write some callback functions by yourself and test it:
=function(){
move(oDiv,"left",600,1000,function(){
move(oDiv,'top',400,1000,function(){
move(oDiv,"width",300,1000,function(){
move(oDiv,"opacity",0,1000);
});
});
});
};
// Get non-line stylesfunction setStyle(obj,name){
// Consider compatibility issuesif(){//Incompatible with Firefox and Googlereturn [name];
}else{
return getComputedStyle(obj,false)[name];//Incompatible with IE};
};
};
Okay, let’s wrap it up here today. This is just a simple wrapping. We will improve it tomorrow, such as the problem of too many parameters and the order of parameters cannot be messed up, and the bugs that occur when clicking the timer multiple times. If you have a good method, please leave a message in the comment area. Programmers need to learn from each other. See you tomorrow, old men!
The above example explanation of the native js encapsulated sports framework is all the content I share with you. I hope you can give you a reference and I hope you can support me more.