First of all, I want to say that I am, these articles are dedicated to those who want to learn like me. Several friends in the forum have posted buffering effects, but looking at their code like me is really a pain. Because it is not at the same level, I use the most redundant code to write this effect, and hope that we can understand it. When we are not fucked, we will look back at the masters' things. Finally, please believe it This sentence: Run the code box For the key codes, please read these two: function f_s(){ //slow to fast
One day you will become a master, (provided that you have to work hard haha^^)
[Ctrl+A All selection tips: You can modify some code first, and then press Run]
var obj=document.getElementById("box");//Get the object with ID box
obj.style.display="block";//Set the object obj as display
obj.style.width="1px"; //Set the width of the object obj to 1px
var changeW=function(){ //(About function, what closures, what kind of class, prototype, I have made me overwhelmed. Let's understand it slowly in the future. What I understand here is to create a function and directly count it and put it into It is stored in the variable changeW)
var obj_w=parseInt(obj.style.width);//Convert the width of the object to a numeric value and store it in the variable obj_w;
if(obj_w<600){ //Judge, if the width value is less than 600
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";// Calculate the width of the object. . . As the width grows, the increment becomes smaller and smaller
}
else{
clearInterval(bw);//If it is greater than or equal to 600, setInterval will no longer be executed, which means that the width will be stopped at this time.
}
}
var bw=window.setInterval(changeW,1)//Call changeW every 0.001 seconds
}
//Declare a function s_f()
function s_f(){
var obj=document.getElementById("box2");
var e_add=1;//Initialize increment
obj.style.display="block";
obj.style.width="1px";
var changeW=function(){//What I understand is to create a function directly and store it in the variable changeW
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//The value incremented from then on is
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//As the width grows, the increment becomes larger and larger
}
else{
clearInterval(bw);
obj.style.width="600px";//Because (obj_w+e_add) calculation method will exceed the predefined width, so the width is reset after buffering. This creates an illusion.
}
}
var bw=window.setInterval(changeW,1)
}