Novice aprende efeito buffer de mim

Autor：Eve Cole Data da Última Atualização：2025-02-17 09:27:41

Primeiro de tudo, quero dizer que eu sou, esses artigos são dedicados àqueles que querem aprender como eu Não no mesmo nível, eu uso o código mais redundante para escrever esse efeito e espero que possamos entender.
Um dia você se tornará um mestre (desde que tenha que trabalhar duro haha ^^)

Execute a caixa de código
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml-transitional.dtd"> <html xmlns = " : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" content-type "content =" text/html; título> </ading> <estilo> corpo {font-size: 12px} #Box {Background: #FFFCC; margem: 2px; BT_DOWN {Background: #DDDCE4 URL (/u/info_img/2009-06/20/arrow_down.gif) No-repetir 35px 46%; My_ Background: #DDDCE4; #my .my_ ul li {width: 48%; y: oculto; transbordamento-x: Hidden; 3px;} </style> <cript> // Não vou comentar sobre as duplicatas abaixo ~~ // Rápido para diminuir de rápido para lento // declarar uma função f_s () function f_s () {var obj = document. getElementById ("caixa"); // Obtenha o objeto obj.style.display = "bloco"; // defina o objeto obj para exibir obj.style.width = "1px"; var alteraçãow = function () {// (sobre a função, que fechamentos, que tipo de classes, protótipos, eu me fiz me sentir sobrecarregado. Vamos entender isso lentamente no futuro. O que eu entendo aqui é criar uma função diretamente e armazená -la na variável alteração) var obj_w = parseint (obj.style.width); // converte a largura do objeto em um valor numérico e armazená -lo na variável obj_w; if (obj_w <600) {// juiz, 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 cresce, o incremento se torna cada vez menor} else {ClearInterval (BW); // Se for maior ou igual a 600, o setInterval não será mais executado, o que significa que a largura parará de aumentar. }} var bw = window.setInterVal (alteraçãow, 1) // Chamada Chamadaw a cada 0,001 segundos} // lento para jejuar de lento para rápido // declara uma função s_f () function s_f () {var obj = document.getElementById ( "Box2"); Uma função conta e armazena diretamente na variável alteração var obj_w; e_add obj_w = parseint (obj.style.width); .width = (obj_w+e_add)+"px"; // À medida que a largura cresce, o incremento se torna cada vez maior} else {ClearInterval (bw); e_add) Este método de cálculo excederá a largura predefinida, portanto, redefinirá sua largura após o buffer. {var obj = document.getElementById (id); // Obtenha o objeto com ID da caixa obj.style.width = w; > 1) {obj.style.width = (obj_w-math.ceil (obj_w)/20)+"px"; // calcule a largura do objeto. . . À medida que a largura cresce, o incremento se torna cada vez menor} mais {ClearInterval (BW); // A função a seguir é abrir minha ilha function Open_my () {var obj = document.getElementById ("my _"); // Obtenha o objeto com ID de caixa obj.style.display = "bloco"; // Definir objeto obj para exibir obj.style.width = "1px"; Tipo de classe ou protótipos me fez ter uma grande dor de cabeça. ; // converte a largura do objeto em um valor numérico e armazene -o na variável obj_w; O valor é menor que 600 obj.style.width = (obj_w+math.ceil ((200-obj_w)/20))+"px"; // calcule a largura do objeto. . . À medida que a largura cresce, o incremento se torna cada vez menor obj.style.Height = (obj_h+math.ceil ((150-obj_h)/15))+"px"; é maior ou igual a 600, o setInterval não será mais executado, o que significa que a largura será interrompida neste momento. }} var bw = window.setInterVal (alteraçãow, 1) // Chamada ChangeWw todos com caixa de identificação var fechada = function () {var obj_w = parseint (obj.style.width); = (obj_w-math.ceil (obj_w)/20)+"px"; // calcule a largura do objeto. . . À medida que a largura cresce, o incremento se torna menor e menor obj.style.Height = (obj_h-math.ceil (obj_h)/15)+"px"; ";}} var bw = window.setInterval (fechado, 1) // Chamada Alterar a cada 0,001 segundos} </script> <body> Primeiro de tudo, quero dizer que esses artigos são dedicados ao mesmo que estudam. Eu uso o código mais redundante para escrever esse efeito, esperando que possamos entender, <r /> <r />, quando não formos fodidos, vamos olhar para as coisas dos mestres Por fim, acredite nesta frase: <r /> <r /> Um dia eu me tornarei um mestre (desde que você tenha que trabalhar duro haha ^^) <br /> <r /> <a href = "#" OnClick = "f_s ()"> de Fast para Slow </a> & nbsp; & nbsp; <r /> <r /> <a href = "#" onclick = "s_f (); retorna false"> de lento para rápido para rápido para rápido </a> & nbsp; & nbsp; <r /> <r /> <div id = "box"> <h3> rápido-> lento <a href = "#" onclick = "closew ('caixa', '600px' ) "> [Fechar] </a> </h3> </div> <div id =" box2 "> <h3> lento-> rápido <a href ="#"onclick =" closew ('box2', ' 600px ') "> [fechar] </a> </h3> </div> <h3> Como fizemos esse efeito, devemos aplicá -lo à situação real </h3> <h3> agora, vamos tomar um Veja a aplicação real do efeito de buffer </h3> <div id = "my"> <a href = "#" class = "bt_down" onMouseOverover = "Open_my ()"> my < /a> <div class = " my_ "id =" my_ "> <ul> <li> Meus tópicos </li> <li> Minha coleção </li> <li> minhas permissões </li> <li> li> minha votação </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 _')"> feche </a> </li> </ul> </div> </div> <r /> <r /> <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> 48_1164245_t.jpg " / > </li> <li> <img src = "/u/info_img/2009-06/20/work_291488_8330_20080829_151402_6235352_t.jpg"/</li> <li> /20/work_577_8423_20080902_115301_643310_t.jpg "/> </li> <li> src = " /u/info_img/2009-06/20/work_387129_8408_20080901_180829_5234680_t.png "/> </li> <li> 8349305_T.jpg " /> </li> <li> <img src = "/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710510_t.jpg"/> </li> </ul> </div> </div> <br/> <ahref = " #"OnClick =" Scrol (); BR /> Claro, o efeito acima é exatamente o que eu uso para demonstrar o efeito de buffer, <r /> <r /> não é adequado para isso, o efeito é porque a função que escrevi aqui será transferida apenas uma vez. < BR /> <BR /> Se você usar esse método muitas vezes, parece que não é fácil de alcançar. <r /> <r /> parece que há muito código, principalmente porque as duas colunas abaixo fazem o código parecer muito <BR /> <r />, o que é realmente importante é f_s (), s_f () , Closew () <Br /> <r /> Se você pode entender, pode aprender com isso. <Br /> <r /> Isso é tudo hoje. <r /> <r /> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; /> <script type = "text/javascript"> error de função () {var obj = document.getElementById ("s_img"); obj.scrollleft <obj_w) {obj.scrollleft = (obj.scrollleft+math.ceil ((obj_w-obj.scrollleft)/15)); , 1)} função scrol () {var obj = document.getElementById ("s_img"); .ScrollLeft- = Math.ceil (obj_w)/50; } </script> </body> </html>
[Ctrl+A todas as dicas de seleção: você pode modificar algum código primeiro e depois pressionar Run]

Para os códigos -chave, leia estes dois:

função f_s () {
var obj = document.getElementById ("caixa"); // Obtenha o objeto com a caixa de identificação
obj.style.display = "block"; // Defina o objeto Obj como exibição
obj.style.width = "1px";
var alteraçãow = function () {// (sobre função, que fechamentos, que tipo de classe, protótipo, eu me deixei sobrecarregado. Vamos entender isso lentamente no futuro. O que eu entendo aqui é criar uma função e contá -la diretamente e coloque -o nele é armazenado na variável alteraçãow)
var obj_w = parseint (obj.style.width); // converte a largura do objeto em um valor numérico e armazenam -o na variável obj_w;
if (obj_w <600) {// juiz, se o valor da largura for menor que 600
obj.style.width = (obj_w+math.ceil ((600-obj_w)/15))+"px"; // calcule a largura do objeto. . . À medida que a largura aumenta, o incremento se torna cada vez menor
}
outro{
ClearInterval (BW); // Se for maior ou igual a 600, o setInterval não será mais executado, o que significa que a largura será interrompida neste momento.
}
}
var bw = window.setInterval (alteração, 1) // Chamada Changew a cada 0,001 segundos
}

// lento para jejuar
// Declare uma função s_f ()
função s_f () {
var obj = document.getElementById ("box2");
var e_add = 1; // Inicialize o incremento
obj.style.display = "bloco";
obj.style.width = "1px";
var alteraçãow = function () {// o que eu entendo é criar uma função diretamente e armazená -la na variável alteraçãoww
var obj_w; e_add
obj_w = parseint (obj.style.width);
e_add*= 1,05; // o valor incrementado a partir de então
if (obj_w <600) {
obj.style.width = (obj_w+e_add)+"px"; // À medida que a largura cresce, o incremento se torna cada vez maior
}
outro{
ClearInterval (BW);
obj.style.width = "600px"; // porque (obj_w+e_add) o método de cálculo excederá a largura predefinida; portanto, a largura é redefinida após o buffer.
}
}
var bw = window.setInterval (alteraçãow, 1)
}