Novato, aprende de mí el efecto de amortiguación.

Autor：Eve Cole Fecha de actualización：2009-06-20 16:54:28

En primer lugar, lo que quiero decir es que lo soy, y estos artículos están dedicados a aquellos que quieren aprender como yo. Varios amigos en el foro han publicado efectos de almacenamiento en búfer, pero me resulta realmente doloroso leer su código. Debido a que no están en el mismo nivel, utilizo el código más redundante para escribir este efecto. El propósito es esperar que puedas entenderlo. Cuando no seamos buenos en eso, volveremos y veremos las cosas. Maestros. Finalmente, crea en esta oración:
Un día te convertirás en un maestro (siempre que trabajes duro jaja ^^)

Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//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 sin título</ título> </head> <estilo> cuerpo { tamaño de fuente:12px} #box { fondo:#FFFFCC; borde:1px sólido #FFCC66; ancho:600px;pantalla:ninguno; margen:2px; desbordamiento:oculto} #box2 { fondo:#CDEDEC; borde:1px sólido #3399CC; ancho:600px; alto:100px;display:none;text-align:right; bt_down {fondo: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) sin repetición 35px 46%; relleno:5px 20px 5px 5px; my_ { fondo:#DDDCE4; ancho:200px; altura:150px; margen:10px 0 10px 10px; #my .my_ ul li { ancho: 48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0} #s_img { ancho:430px; y: oculto; desbordamiento-x: oculto; borde: 1px sólido #ccc} #imgs ul {estilo de lista: ninguno; margen-izquierda: 0} #imgs ul li{ float: izquierda; 3px;} </style> <script> //No comentaré los similares que se repiten a continuación~~ //de rápido a lento //Declarar una función f_s() function f_s(){ var obj= document.getElementById( "box"); //Obtener el objeto con el ID box obj.style.display="block"; //Establecer el objeto obj para mostrar obj.style.width="1px"; es 1px var changeW=function(){ //(Acerca de funciones, cierres, clases y prototipos, se me hace grande la cabeza. Lo entenderé más tarde. Lo que entiendo aquí es crear una función literal y almacenarla en la variable changeW) var obj_w=parseInt(obj.style.width);//Convertir el ancho del objeto en un valor numérico y almacenarlo en la variable obj_w; if (obj_w<600){ //Juzga, si el valor del ancho es menor que 600 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Calcula el ancho del objeto. . . A medida que el ancho se hace más largo, el incremento se vuelve cada vez más pequeño } else{ clearInterval(bw);// Si es mayor o igual a 600, setInterval ya no se ejecutará, lo que significa que el ancho dejará de aumentar en este momento . } } var bw=window.setInterval(changeW,1)//Llamar a changeW cada 0.001 segundos } //de lento a rápido //Declarar una función s_f() function s_f(){ var obj=document.getElementById ("box2") ; var e_add=1;//Incremento de inicialización obj.style.display="block"; obj.style.width="1px"; var changeW=function(){//Lo que entiendo es que crear una función toma una dirección value y lo almacena en la variable changeW var obj_w;e_add obj_w=parseInt(obj.style.width); e_add*=1.05;//El valor que aumentará cada vez a partir de entonces es if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";// A medida que el ancho se hace más largo, el incremento se hace cada vez más grande} else{ clearInterval(bw); obj.style.width="600px";// Porque el método de cálculo of (obj_w+e_add) excederá el ancho predefinido, por lo que su ancho se restablece después del almacenamiento en búfer. Esto crea una ilusión jaja} } var bw=window.setInterval(changeW,1) } // Cerrar función de capa closeW(id,w) { var obj=document.getElementById(id);//Obtener el objeto con cuadro 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";//Calcula el ancho del objeto. . . A medida que el ancho se hace más largo, el incremento se vuelve cada vez más pequeño} else{ clearInterval(bw); obj.style.display="none"; } } var bw=window.setInterval(closeDiv,1)//Llamar cada 0,001 segundos Uno changeW } //La siguiente función es abrir mi ↓ función open_my(){ var obj=document.getElementById("my_");//Obtener el objeto con cuadro de ID obj.style.display="block";// Establecer el objeto obj para mostrar obj.style.width="1px"; //Establece el ancho del objeto obj en 1px obj.style.height="1px"; var changeW=function(){ //(Acerca de la función, Los cierres, clases y prototipos me resultan confusos. Los entenderé más adelante. Lo que entiendo aquí es crear una función literal y almacenarla en la variable changeW) var obj_w=parseInt(obj.style. width);//Convert. el ancho del objeto en un valor numérico y lo almacena en la variable obj_w; var obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //Juzga, si el ancho El valor es menos de 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//Calcula el ancho del objeto. . . A medida que el ancho se hace más largo, el incremento se vuelve cada vez más pequeño obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px"; else{ clearInterval(bw);// If es mayor o igual a 600, setInterval ya no se ejecutará, lo que significa que el ancho dejará de aumentar en este momento. } } var bw=window.setInterval(changeW,1)//Llamar a changeW cada 0.001 segundos } //La siguiente función es cerrar mi ↓ función de capa mostrada close_my(id){ var obj=document.getElementById(id );/ /Obtener el objeto con cuadro de ID var closeDiv=function(){ var obj_w=parseInt(obj.style.width); var obj_h=parseInt(obj.style.height); if(obj_w>1 && obj_h >1 ){ obj .style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Calcula el ancho del objeto. . . A medida que el ancho se hace más largo, el incremento se vuelve cada vez más pequeño obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px"; else{ clearInterval(bw); none"; } } var bw=window.setInterval(closeDiv,1)//Llamar a changeW cada 0.001 segundos } </script> <body> Antes que nada, quiero decir que estos artículos están dedicados a personas que quieren lo mismo cosas como yo Aquellos que están aprendiendo.<br /><br /> Varios amigos en el foro han publicado efectos de almacenamiento en búfer, pero es realmente doloroso para mí mirar sus códigos porque no están en el mismo nivel.<br / ><br />Así que uso el código más redundante para escribir este efecto, el propósito es esperar que la gente pueda entenderlo.<br /><br />Cuando no seamos buenos en eso, regresaremos y miraremos. en las cosas de los maestros <br /><br /> Finalmente, por favor cree en esta frase:<br /><br /> Un día te convertirás en un maestro (siempre que trabajes duro jaja^^)<br / ><br /> < a href="#" onclick="f_s()">De rápido a lento</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">De lento a rápido</a>  <br /><br /> <div id="box" ><h3>Rápido->Lento<a href="#" onclick="closeW(' box','600px')">[Cerrar]</a></h3></div> <div id="box2" ><h3>Lento->Rápido<a href=" #" onclick="closeW ('box2','600px')">[Cerrar]</a></h3></div> <h3>Ahora que hemos creado este efecto, debemos aplicarlo a la práctica< /h3 > <h3>Ahora echemos un vistazo a la aplicación real del efecto de almacenamiento en búfer</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >Mis</a> <div class="my_" id="my_" > <ul> <li>Mis temas</li> <li>Mis colecciones</li> <li>Mis permisos</li> < li>Mi voto</li> <li>Mis actividades</li> <li>Mi ciudad</li> <li>Mis trabajos</li> <li>Mi dirección</li> < li>Mi experiencia< /li> <li>Mis amigos</li> <li>Mi espacio</li> <li><a href="#" onclick="close_my('my_')"> Cerrar</a></li > </ul> </div> </div> <br /> <br /> <div id="s_img" style="ancho:430px;"> <div id=" imgs" style="ancho: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">Desplazarse hacia la izquierda</a> <a href="#" onclick="scror() ; return false">Desplazarse correcto</a><br /><br /> Por supuesto, el efecto anterior solo lo uso para demostrar el efecto de amortiguación.<br /><br /> No es adecuado para este tipo de efecto. Esto se debe a que la función que escribí aquí solo se transferirá una vez.<br /><br /> No parece muy fácil usar este método varias veces.<br /><br /> Finalmente, déjame decirte que no Déjate engañar. El código aquí me asusta.<br /><br />Parece mucho código, principalmente debido a los dos últimos ejemplos, lo que hace que el código parezca mucho.<br /><br /> Qué. Lo realmente importante es f_s(), s_f (),closeW()<br /><br /> Si puedes entenderlo, entonces también puedes hacer inferencias.<br /><br /> Eso es todo por hoy. Espero que estas cosas puedan serte de alguna ayuda ^^<br /><br />               &nbsp. ;            <br /> <script type="text/javascript"> función scror(){ var obj=document.getElementById(" 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 } else{ clearInterval(bw); =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width } </script> </body> </html>);
[Ctrl+A Todos los consejos de selección: primero puede modificar parte del código y luego presionar Ejecutar]

Mire estos dos códigos clave:

función f_s(){
var obj=document.getElementById("box");//Obtener el objeto con el cuadro ID
obj.style.display="block";//Establecer objeto obj para mostrar
obj.style.width="1px"; //Establece el ancho del objeto obj en 1px
var changeW=function(){ //(Acerca de la función, qué cierre, qué clase, prototipo, me hace la cabeza grande, lo entenderé lentamente en el futuro. Lo que entiendo aquí es crear una función para medir directamente y put Se almacena en la variable changeW)
var obj_w=parseInt(obj.style.width);//Convierte el ancho del objeto en un valor numérico y lo almacena en la variable obj_w;
if(obj_w<600){ //Juzga, si el valor del ancho es menor que 600
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Calcula el ancho del objeto. . . A medida que el ancho se hace más largo, el incremento se hace cada vez más pequeño.
}
demás{
clearInterval(bw);// Si es mayor o igual a 600, setInterval ya no se ejecutará, lo que significa que el ancho dejará de aumentar en este momento.
}
}
var bw=window.setInterval(changeW,1)//Llamar a changeW cada 0,001 segundos
}

//de lento a rápido de lento a rápido
//Declarar una función s_f()
función s_f(){
var obj=document.getElementById("cuadro2");
var e_add=1;//Incremento de inicialización
obj.style.display="bloque";
obj.style.width="1px";
var changeW=function(){//Lo que entiendo es crear un literal de función y almacenarlo en la variable changeW
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//El valor de cada incremento posterior es
si(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//A medida que el ancho se hace más largo, el incremento se hace cada vez más grande
}
demás{
borrarIntervalo(bw);
obj.style.width="600px";//Debido a que (obj_w+e_add) este método de cálculo excederá el ancho predefinido, su ancho se restablece después del almacenamiento en búfer. Esto crea una ilusión jaja.
}
}
var bw=ventana.setInterval(cambioW,1)
}