First of all, what I want to say is that I am, and these articles are dedicated to those who want to learn like me. Several friends in the forum have posted buffering effects, but it is really painful for me to read their code. Because they are not on the same level, I use the most redundant code to write this effect. The purpose is to hope that you can understand it. When we are not good at it, we will go back and look at the things of the masters. Finally, please believe This sentence: One day you will become a master, (provided you work hard haha^^)
Run code box [Ctrl+A All selection tips: You can modify part of the code first, and then press Run]
Please look at these two key codes:
function f_s(){ var obj=document.getElementById("box");//Get the object with ID box obj.style.display="block";//Set object obj to display obj.style.width="1px"; //Set the width of object obj to 1px var changeW=function(){ //(About the function, what closure, what class, prototype, it makes my head big, I will understand it slowly in the future. What I understand here is to create a function to directly measure and put It is stored in the variable changeW) var obj_w=parseInt(obj.style.width);//Convert the width of the object into a numerical 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 becomes longer, 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 stop increasing at this time. } } var bw=window.setInterval(changeW,1)//Call changeW every 0.001 seconds }
//slow to fast from slow to fast //Declare a function s_f() function s_f(){ var obj=document.getElementById("box2"); var e_add=1;//Initialization increment obj.style.display="block"; obj.style.width="1px"; var changeW=function(){//What I understand is to create a function literal and store it in the variable changeW var obj_w;e_add obj_w=parseInt(obj.style.width); e_add*=1.05;//The value of each subsequent increment is if(obj_w<600){ obj.style.width=(obj_w+e_add)+"px";//As the width becomes longer, the increment becomes larger and larger } else{ clearInterval(bw); obj.style.width="600px";//Because (obj_w+e_add) this calculation method will exceed the predefined width, so its width is reset after buffering. This creates an illusion haha } } var bw=window.setInterval(changeW,1) }
