Novato, aprenda o efeito de buffer comigo

Autor：Eve Cole Data da Última Atualização：2009-06-20 16:54:28

Em primeiro lugar, o que quero dizer é que sim, e esses artigos são dedicados a quem quer aprender como eu. Vários amigos no fórum postaram efeitos de buffer, mas é muito doloroso para mim ler o código deles. Como eles não estão no mesmo nível, eu uso o código mais redundante para escrever esse efeito. O objetivo é esperar que você possa entendê-lo. Quando não formos bons nisso, voltaremos e veremos as coisas. mestres. Finalmente, por favor, acreditem nesta frase:
Um dia você se tornará um mestre, (desde que trabalhe duro haha ^^)

Execute a caixa de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</ título> </head> <estilo> corpo { font-size:12px} #box { background:#FFFFCC; borda:1px sólido largura:600px;display:none; margin:2px; overflow:hidden} #box2 { background:#CDEDEC; border:1px solid width:600px;display:none;text-align:right margin:2px; bt_down {background: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) sem repetição 35px 46%; preenchimento:5px 20px 5px 5px; text-align:left} #my {} #my . my_ { background:#DDDCE4; largura:200px altura:150px; display:none; overflow:hidden} #my .my_ ul{ estilo de lista:none; #my .my_ ul li { largura:48%; text-align:center; line-height:22px; y: oculto; overflow-x: oculto; borda: 1px sólido #ccc} #imgs ul {estilo de lista: nenhum; preenchimento-esquerdo:0} #imgs ul li{ margem esquerda: 3px;} </style> <script> //Não comentarei os similares repetidos abaixo~~ //rápido para lento //Declarar uma função f_s() function f_s(){ var obj= document.getElementById( "box"); //Obter o objeto com o ID box obj.style.display="block"; //Definir o objeto obj para exibir obj.style.width="1px"; é 1px var changeW=function(){ //(Sobre funções, encerramentos, classes e protótipos, isso me deixa com a cabeça grande. Vou entender mais tarde. O que entendi aqui é criar uma função literal e armazená-la na variável changeW) var obj_w=parseInt(obj.style.width);//Converter a largura do objeto em um valor numérico e armazená-lo na variável obj_w; if (obj_w<600){ //Julgar, se o valor da largura for menor que 600 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Calcular o largura do objeto. . . À medida que a largura aumenta, o incremento fica cada vez menor } else{ clearInterval(bw); //Se for maior ou igual a 600, setInterval não será mais executado, o que significa que a largura irá parar de aumentar neste momento . } } var bw=window.setInterval(changeW,1)//Chama changeW a cada 0,001 segundos } //de lento para rápido //Declara uma função s_f() function s_f(){ var obj=document.getElementById ("box2") ; var e_add=1;//Incremento de inicialização obj.style.display="block"; obj.style.width="1px"; value e o armazena na variável changeW var obj_w;e_add obj_w=parseInt(obj.style.width);//O valor que aumentará a cada vez é if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";//À medida que a largura fica maior, o incremento fica cada vez maior} else{ clearInterval(bw); de (obj_w+e_add) excederá a largura predefinida, então sua largura será redefinida após o buffer. Isso cria uma ilusão haha} } var bw=window.setInterval(changeW,1) } // Fechar função de camada closeW(id,w) { var obj=document.getElementById(id);//Obter o objeto com caixa de ID obj.style.width=w; var closeDiv=function(){ var obj_w=parseInt(obj. style.width); 1){ obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Calcule a largura do objeto. . . À medida que a largura aumenta, o incremento fica cada vez menor} else{ clearInterval(bw); obj.style.display="none" } var bw=window.setInterval(closeDiv,1)//Chame a cada 0,001 segundos Um; changeW } //A função a seguir é abrir minha ↓ function open_my(){ var obj=document.getElementById("my_");//Obter o objeto com ID box obj.style.display="block";// Set o objeto obj para exibir obj.style.width="1px" //Defina a largura do objeto obj para 1px obj.style.height="1px"; o que Closures, classes e protótipos me confundem. Vou entendê-los mais tarde. O que entendi aqui é criar uma função literal e armazená-la na variável changeW) var obj_w=parseInt(obj.style. width);//Convert. a largura do objeto em um valor numérico e armazene-o na variável obj_w; var obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //Julgue, se a largura O valor for menos de 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//Calcula a largura do objeto. . . À medida que a largura aumenta, o incremento fica cada vez menor obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px"; for maior ou igual a 600, setInterval não será mais executado, o que significa que a largura irá parar de aumentar neste momento. } } var bw=window.setInterval(changeW,1)//Chamar changeW a cada 0,001 segundos } //A função a seguir é fechar minha ↓ camada exibida function close_my(id){ var obj=document.getElementById(id );/ /Obter o objeto com caixa de ID var closeDiv=function(){ var obj_w=parseInt(obj.style.width){ obj.style.height); .style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Calcula a largura do objeto. . . À medida que a largura aumenta, o incremento fica cada vez menor obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px" } else{ clearInterval(bw); none"; } } var bw=window.setInterval(closeDiv,1)//Chamar changeW a cada 0,001 segundos } </script> <body> Em primeiro lugar, quero dizer que esses artigos são dedicados a pessoas que desejam o mesmo coisas como eu Aqueles que estão aprendendo.<br /><br /> Vários amigos no fórum postaram efeitos de buffer, mas é realmente doloroso para mim olhar seus códigos porque eles não estão no mesmo nível.<br / ><br />Então eu uso o código mais redundante para escrever esse efeito, o objetivo é esperar que as pessoas possam entendê-lo,<br /><br />Quando não somos bons nisso, vamos voltar e olhar nas coisas dos mestres. <br /><br /> Finalmente, por favor, acredite nesta frase:<br /><br /> Um dia você se tornará um mestre, (desde que trabalhe duro haha^^)<br / ><br /> < a href="#" onclick="f_s()">De rápido a lento</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">De lento para rápido</a>  <br /><br /> <div id="box" ><h3>Rápido->Lento<a href="#" onclick="closeW(' box','600px')">[Fechar]</a></h3></div> <div id="box2" ><h3>Lento->Rápido<a href=" #" onclick="closeW ('box2','600px')">[Close]</a></h3></div> <h3>Agora que criamos esse efeito, devemos aplicá-lo na prática< /h3 > <h3>Agora vamos dar uma olhada na aplicação real do efeito de buffer</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >Meus</a> <div class="my_" id="my_" > <ul> <li>Meus tópicos</li> <li>Minhas coleções</li> <li>Minhas permissões</li> < li>Meu voto</li> <li>Minhas atividades</li> <li>Minha cidade</li> <li>Meus trabalhos</li> <li>Meu endereço</li> < li>Minha experiência< /li> <li>Meus amigos</li> <li>Meu espaço</li> <li><a href="#" onclick="close_my('my_')"> Fechar</a></li > </ul> </div> </div> <br /> <br /> <div id="s_img" style="width:430px;"> <div id=" imgs" style="width:1700px ;"> <ul> <li><img src="/u/info_img/2009-06/20/work_577_8421_20080902_112516_6677857_t.jpg" /></li> <li><img src= "/u/info_img/2009- 06/20/work_352426_8413_20080901_201448_1164245_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_291488_8330_20080829_151 402_6235352_t. jpg" /></li > <li><img src ="/u/info_img/2009-06/20/work_577_8423_20080902_115301_643310_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_23709_8344_2008083 0_123900_9 878235_t.jpg" />< /li> <li><img src="/u/info_img/2009-06/20/work_387129_8408_20080901_180829_5234680_t.png" /></li> <li><img src="/u/info_img /2009-06/20 /work_443685_8362_20080831_093043_8349305_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710 510_t.jpg /></li > </ul> </div> < /div><br /> <a href="#" onclick="scrol(); return false">Rolar para a esquerda</a> <a href="#" onclick="scror() ; return false">Rolar certo</a><br /><br /> Claro, o efeito acima só é usado por mim para demonstrar o efeito de buffer.<br /><br /> Não é adequado para este tipo de efeito. é porque a função que escrevi aqui só será transferida uma vez.<br /><br /> Não parece muito fácil usar esse método várias vezes.<br /><br /> Finalmente, deixe-me dizer, não se engane. O código aqui me assusta,<br /><br />Parece muito código, principalmente por causa dos dois últimos exemplos, o que faz o código parecer muito<br /><br /> O que o que é realmente importante é f_s(), s_f (),closeW()<br /><br /> Se você consegue entender, então você também pode fazer inferências.<br /><br /> Por hoje é isso. espero que essas coisas possam ser úteis para você ^^<br /><br />              &nbsp.             s_img"); var h=function(){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft<obj_w){ obj.scrollLeft=(obj.scrollLeft+Math.ceil((obj_w-obj. scrollLeft)/15)); } else{ clearInterval(bw } } var bw=window.setInterval (h,1) } function scroll(){ var obj=document.getElementById("s_img"); (){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft>1) { obj.scrollLeft-=Math.ceil(obj_w)/50; =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width } } </script> </body> </html>);
[Ctrl+A Todas as dicas de seleção: você pode modificar parte do código primeiro e depois pressionar Executar]

Observe estes dois códigos de teclas:

//de lento para rápido, de lento para rápido
//Declara uma função s_f()
função s_f(){
var obj=document.getElementById("caixa2");
var e_add=1;//incremento de inicialização
obj.style.display="bloquear";
obj.style.width="1px";
var changeW=function(){//O que eu entendo é criar uma função literal e armazená-la na variável changeW
var obj_w;e_add
obj_w=parseInt(obj.style.largura);
e_add*=1.05;//O valor de cada incremento subsequente é
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//À medida que a largura fica maior, o incremento fica cada vez maior
}
outro{
clearInterval(bw);
obj.style.width="600px";//Porque (obj_w+e_add) este método de cálculo excederá a largura predefinida, então sua largura é redefinida após o buffer. Isso cria uma ilusão haha.
}
}
var bw=window.setInterval(mudançaW,1)
}