우선 제가 말씀드리고 싶은 것은 저처럼 배우고 싶은 분들을 위해 이 글을 바친다는 것입니다. 포럼의 몇몇 친구들이 버퍼링 효과를 게시했지만 그들의 코드를 읽는 것은 정말 고통스럽습니다. 동일한 수준이 아니기 때문에 가장 중복되는 코드를 사용하여 이 효과를 작성합니다. 우리가 잘하지 못할 때 다시 돌아가서 이해할 수 있기를 바랍니다. 마스터. 마지막으로 이 문장을 믿어주세요. 언젠가는 마스터가 되실 겁니다. (노력하시면 됩니다 ㅎㅎ^^)
코드 상자 실행 [Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 다음 실행을 누를 수 있습니다.]
다음 두 가지 키 코드를 살펴보세요:
function f_s(){ var obj=document.getElementById("box");//ID가 있는 객체 가져오기 box obj.style.display="block";//표시할 객체 obj 설정 obj.style.width="1px"; //객체 obj의 너비를 1px로 설정합니다. varchangeW=function(){ //(함수에 대해서는 어떤 클로저, 어떤 클래스, 프로토타입이 있는지 머리가 복잡해지니 앞으로 천천히 이해하겠습니다. 여기서 이해하는 것은 직접 측정하고 put 변수change에 저장됩니다W) var obj_w=parseInt(obj.style.width);//객체의 너비를 숫자 값으로 변환하여 변수 obj_w에 저장합니다. if(obj_w<600){ //너비 값이 600보다 작은지 판단 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//객체의 너비를 계산합니다. . . 너비가 길어질수록 증분은 점점 작아집니다. } 또 다른{ clearInterval(bw);//600보다 크거나 같으면 setInterval이 더 이상 실행되지 않습니다. 즉, 이때 너비 증가가 중지됩니다. } } var bw=window.setInterval(changeW,1)//0.001초마다changeW 호출 }
//느린 속도에서 빠른 속도로 느린 속도에서 빠른 속도로 //s_f() 함수 선언 함수 s_f(){ var obj=document.getElementById("box2"); var e_add=1;//초기화 증분 obj.style.display="차단"; obj.style.width="1px"; varchangeW=function(){//내가 이해하는 것은 함수 리터럴을 생성하여 변수changeW에 저장하는 것입니다. var obj_w;e_add obj_w=parseInt(obj.style.width); e_add*=1.05;//각 후속 증분 값은 다음과 같습니다. if(obj_w<600){ obj.style.width=(obj_w+e_add)+"px";//너비가 길어질수록 증분은 점점 커집니다. } 또 다른{ ClearInterval(bw); obj.style.width="600px";//(obj_w+e_add) 때문에 이 계산 방법은 미리 정의된 너비를 초과하므로 버퍼링 후에 너비가 재설정됩니다. 이로 인해 환상이 생깁니다. ㅋㅋㅋ } } var bw=window.setInterval(changeW,1) }
