Débutant, apprends de moi l'effet tampon

Auteur：Eve Cole Date de mise à jour：2009-06-20 16:54:28

Tout d'abord, ce que je veux dire, c'est que je le suis, et ces articles sont dédiés à ceux qui veulent apprendre comme moi. Plusieurs amis du forum ont posté des effets de buffering, mais c'est vraiment pénible pour moi de lire leur code. Parce qu'ils ne sont pas au même niveau, j'utilise le code le plus redondant pour écrire cet effet. Le but est d'espérer que vous pourrez le comprendre. Quand nous ne sommes pas bons dans ce domaine, nous reviendrons sur les choses. Maîtres. Enfin, s'il vous plaît, croyez cette phrase :
Un jour tu deviendras un maître, (à condition de travailler dur haha^^)

Boîte de code d'exécution
<!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>Document sans titre</ title> </head> <style> body { font-size:12px} #box { background:#FFFFCC; border:1px solid #FFCC66; height:100px;display:none; margin:2px; overflow:hidden} #box2 { background:#CDEDEC; border:1px solid width:600px;display:none;text-align:right; bt_down {arrière-plan : #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) sans répétition 35px 46 % ; remplissage : 5px 20px 5px 5px ; mon_ { background:#DDDCE4; largeur:200px; display:none; overflow:hidden} #my .my_ ul{ list-style:0; margin:10px 0 10px 10px; #my .my_ ul li { width:48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0} #s_img { width:430px; y:hidden;overflow-x:hidden; border:1px solid #ccc} #imgs ul { list-style:none; padding-left:0} #imgs ul li{ float:left margin: 3px;} </style> <script> //Je ne commenterai pas les similaires répétées ci-dessous~~ //rapide à lente //Déclarer une fonction f_s() function f_s(){ var obj= document.getElementById( "box"); //Obtenir l'objet avec l'ID box obj.style.display="block"; //Définir l'objet obj pour afficher obj.style.width="1px" //Définir l'objet obj La largeur is 1px var changeW=function(){ //(À propos des fonctions, des fermetures, des classes et des prototypes, ça me fait grossir la tête. Je le comprendrai plus tard. Ce que je comprends ici, c'est créer une fonction littérale et la stocker dans la variable changeW) var obj_w=parseInt(obj.style.width);//Convertir la largeur de l'objet en une valeur numérique et la stocker dans la variable obj_w; if (obj_w<600){ //Juge, si la valeur de largeur est inférieure à 600 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Calculer la largeur de l'objet. . . À mesure que la largeur s'allonge, l'incrément devient de plus en plus petit } else{ clearInterval(bw);//S'il est supérieur ou égal à 600, setInterval ne sera plus exécuté, ce qui signifie que la largeur cessera d'augmenter à ce moment . } } var bw=window.setInterval(changeW,1)//Appeler changeW toutes les 0,001 secondes } //lent à rapide //Déclarer une fonction s_f() function s_f(){ var obj=document.getElementById ("box2") ; var e_add=1;//Initialization incrément obj.style.display="block"; obj.style.width="1px"; var changeW=function(){//Ce que je comprends, c'est créer une fonction prend un value et la stocke dans la variable changeW var obj_w;e_add obj_w=parseInt(obj.style.width); e_add*=1.05;//La valeur qui augmentera à chaque fois par la suite est if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";//À mesure que la largeur s'allonge, l'incrément devient de plus en plus grand} else{ clearInterval(bw);// Parce que la méthode de calcul de (obj_w+e_add) dépassera la largeur prédéfinie, donc sa largeur est réinitialisée après la mise en mémoire tampon. Cela crée une illusion haha} } var bw=window.setInterval(changeW,1) } // Fonction de fermeture de couche closeW(id,w) { var obj=document.getElementById(id);//Obtenir l'objet avec la boîte d'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";//Calculez la largeur de l'objet. . . À mesure que la largeur s'allonge, l'incrément devient de plus en plus petit} else{ clearInterval(bw); obj.style.display="none"; } } var bw=window.setInterval(closeDiv,1)//Appel toutes les 0,001 secondes Un changeW } //La fonction suivante consiste à ouvrir ma ↓ fonction open_my(){ var obj=document.getElementById("my_");//Obtenir l'objet avec la boîte d'ID obj.style.display="block";// Set l'objet obj à afficher obj.style.width="1px"; //Définissez la largeur de l'objet obj à 1px obj.style.height="1px"; var changeW=function(){ //(À propos de la fonction, ce que les fermetures, les classes et les prototypes me déroutent. Je les comprendrai plus tard. Ce que je comprends ici, c'est créer une fonction littérale et la stocker dans la variable changeW) var obj_w=parseInt(obj.style. width);//Convert la largeur de l'objet en valeur numérique et stockez-la dans la variable obj_w; var obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //Juge, si la largeur est la valeur moins de 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//Calculer la largeur de l'objet. . . À mesure que la largeur s'allonge, l'incrément devient de plus en plus petit obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px" } else{ clearInterval(bw);// If si elle est supérieure ou égale à 600, setInterval ne sera plus exécuté, ce qui signifie que la largeur cessera d'augmenter à ce moment. } } var bw=window.setInterval(changeW,1)//Appelez changeW toutes les 0,001 secondes } //La fonction suivante consiste à fermer ma ↓ fonction de couche affichée close_my(id){ var obj=document.getElementById(id );/ /Obtenir l'objet avec la boîte d'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";//Calculez la largeur de l'objet. . . À mesure que la largeur s'allonge, l'incrément devient de plus en plus petit obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px"; } else{ clearInterval(bw); none"; } } var bw=window.setInterval(closeDiv,1)//Appel changeW toutes les 0,001 secondes } </script> <body> Tout d'abord, je tiens à dire que ces articles sont dédiés aux personnes qui souhaitent la même chose des choses comme moi Ceux qui apprennent.<br /><br /> Plusieurs amis dans le forum ont posté des effets de buffering, mais c'est vraiment pénible pour moi de regarder leurs codes car ils ne sont pas au même niveau.<br / ><br />J'utilise donc le code le plus redondant pour écrire cet effet, le but est d'espérer que les gens pourront le comprendre,<br /><br />Quand nous ne sommes pas bons dans ce domaine, nous y retournerons et regarderons aux choses des maîtres. <br /><br /> Enfin, croyez cette phrase :<br /><br /> Un jour vous deviendrez un maître, (à condition de travailler dur haha^^)<br / ><br /> < a href="#" onclick="f_s()">De rapide à lent</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">De lent à rapide</a>  <br /><br /> <div id="box" ><h3>Rapide->Lent<a href="#" onclick="closeW(' box','600px')">[Fermer]</a></h3></div> <div id="box2" ><h3>Lent->Rapide<a href=" #" onclick="closeW ('box2','600px')">[Fermer]</a></h3></div> <h3>Maintenant que nous avons créé cet effet, nous devons l'appliquer pour nous entraîner< /h3 > <h3>Jetons maintenant un coup d'œil à l'application réelle de l'effet de mise en mémoire tampon</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >Mes</a> <div class="my_" id="my_" > <ul> <li>Mes sujets</li> <li>Mes collections</li> <li>Mes autorisations</li> < li>Mon vote</li> <li>Mes activités</li> <li>Ma ville</li> <li>Mes travaux</li> <li>Mon adresse</li> < li>Mon expertise< /li> <li>Mes amis</li> <li>Mon espace</li> <li><a href="#" onclick="close_my('my_')"> Fermer</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 " > </ul> </div> < /div><br /> <a href="#" onclick="scrol(); return false">Défilement vers la gauche</a> <a href="#" onclick="scror() ; return false">Défilement à droite</a><br /><br /> Bien entendu, l'effet ci-dessus n'est utilisé par moi que pour démontrer l'effet tampon.<br /><br /> Il ne convient pas à ce type d'effet. c'est parce que la fonction que j'ai écrite ici ne sera transférée qu'une seule fois.<br /><br /> Il ne semble pas très facile d'utiliser cette méthode plusieurs fois.<br /><br /> Enfin, laissez-moi vous dire, ne le faites pas soyez dupe. Le code ici me fait peur,<br /><br />Il ressemble à beaucoup de code, principalement à cause des deux derniers exemples, ce qui donne au code une apparence beaucoup<br /><br /> Quoi est vraiment important c'est f_s(), s_f (),closeW()<br /><br /> Si vous pouvez le comprendre, alors vous pouvez également tirer des conclusions.<br /><br /> C'est tout pour aujourd'hui. j'espère que ces choses pourront vous être utiles. ;            <br /> <script type="text/javascript"> fonction 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; autre{ clearInterval(bw } } var bw); =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width } </script> </body> </html>);
[Ctrl+A Tous les conseils de sélection : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Veuillez regarder ces deux codes clés :

//lent à rapide de lent à rapide
//Déclare une fonction s_f()
fonction s_f(){
var obj=document.getElementById("box2");
var e_add=1;//Incrément d'initialisation
obj.style.display="bloc";
obj.style.width="1px";
var changeW=function(){//Ce que je comprends, c'est créer un littéral de fonction et le stocker dans la variable changeW
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//La valeur de chaque incrément suivant est
si(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//À mesure que la largeur s'allonge, l'incrément devient de plus en plus grand
}
autre{
clearInterval(bw);
obj.style.width="600px";//Parce que (obj_w+e_add) cette méthode de calcul dépassera la largeur prédéfinie, donc sa largeur est réinitialisée après la mise en mémoire tampon. Cela crée une illusion haha.
}
}
var bw=window.setInterval(changeW,1)
}