Novice apprend l'effet tampon de moi

Auteur：Eve Cole Date de mise à jour：2025-02-17 09:27:41

Tout d'abord, je veux dire que je le suis, ces articles sont dédiés à ceux qui veulent apprendre comme moi. Pas au même niveau, j'utilise le code le plus redondant pour écrire cet effet, dans le but d'espérer que nous pouvons le comprendre. phrase:
Un jour, vous deviendrez un maître (à condition que vous deviez travailler dur haha ^^)

Exécutez la case de code
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http « Titre> </ head> <style> Body {Font-Size: 12px} #box {Background: #fffcc; marge: 2px; BT_DOWN {Background: # DDDCE4 URL (/u/info_img/2009-06/20/arrow_down.gif) NO-REPEAT 35PX 46%; My_ {Background: # DDDCE4; #my .my_ ul li {largeur: 48%; Y: Hidden; Overflow-x: Hidden; 3px;} </ style> <script> // Je ne commenterai pas les doublons ci-dessous ~~ // rapide à ralentir du rapide à lent // Déclare une fonction f_s () function f_s () {var obj = document. GetElementById ("Box"); // Obtenez l'objet obj.style.display = "Block"; // Définissez l'objet obj pour afficher obj.style.width = "1px"; var changew = function () {// (à propos de la fonction, quelles fermetures, quel type de classes, prototypes, je me suis fait sentir dépassé. Comprenons-le lentement à l'avenir. Ce que je comprends ici, c'est de créer une fonction directement et de le stocker dans la variable changew) var obj_w = parseInt (obj.style.width); // convertir la largeur de l'objet en une valeur numérique et le 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 le Largeur de l'objet. . . À mesure que la largeur augmente, 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. }} var bw = window.setinterval (ChangeW, 1) // Appel ChangeW chaque 0,001 secondes} // lent à rapide de lentement à rapide // Déclare une fonction s_f () function s_f () {var obj = document.getElementById ( "Box2"); Une fonction le compte et le stocke directement dans la variable changew var obj_w; e_add obj_w = parseInt (obj.style.width); .Width = (obj_w + e_add) + "px"; // à mesure que la largeur augmente, l'incrément devient de plus en plus grand} else {clearInterval (bw); E_ADD) Cette méthode de calcul dépassera la largeur prédéfinie, elle réinitialise sa largeur après tampon. {var obj = document.getElementById (id); // Obtenez l'objet avec id de la boîte obj.style.width = w; > 1) {obj.style.width = (obj_w-Math.ceil (obj_w) / 20) + "px"; // calculez la largeur de l'objet. . . À mesure que la largeur augmente, l'incrément devient de plus en plus petit} else {ClearInterval (bw); // La fonction suivante consiste à ouvrir ma fonction ↓ open_my () {var obj = document.getElementById ("My _"); // Obtenez l'objet avec ID de Box obj.style.display = "Block"; // Définir l'objet obj pour afficher obj.style.width = "1px"; Le type de classe ou de prototypes me fait un gros mal de tête. ; // convertir la largeur de l'objet en une valeur numérique et le stocker dans la variable obj_w; La valeur est inférieure à 600 obj.style.width = (obj_w + math.ceil ((200-OBJ_W) / 20)) + "px"; // calculer la largeur de l'objet. . . À mesure que la largeur augmente, l'incrément devient de plus en plus petit obj.style.height = (obj_h + math.ceil ((150-OBJ_H) / 15)) + "px"; est supérieur ou égal à 600, SetInterval ne sera plus exécuté, ce qui signifie que la largeur sera arrêtée pour le moment. }} var bw = window.setinterval (ChangeW, 1) // Appel changew chaque 0,001 secondes} // La fonction suivante ferme la fonction de calque close_my (id) {var obj = document.getElementById (id); // Obtenez l'objet avec la boîte id var closed = function () {var obj_w = parseInt (obj.style.width); = (obj_w-Math.ceil (obj_w) / 20) + "px"; // Calculez la largeur de l'objet. . . À mesure que la largeur augmente, l'incrément devient de plus en plus petit obj.style.height = (obj_h-math.ceil (obj_h) / 15) + "px"; ";}} var bw = window.setinterval (closev, 1) // appelle changew chaque 0,001 secondes} </cript> <body> Tout d'abord, je veux dire que ces articles sont dédiés à la même chose que je veux ceux qui étudient. <r /> <br /> Plusieurs amis du forum ont affiché des effets tampon J'utilise le code le plus redondant pour écrire cet effet, en espérant que nous pouvons le comprendre, <br /> <br /> Quand nous ne sommes pas baisés, nous reviendrons sur les choses des maîtres. Enfin, s'il vous plaît, croyez cette phrase: <r /> <br /> Un jour, je deviendrai un maître (à condition que vous deviez travailler dur haha ^^) <r /> <rr /> <a href = "#" onClick = "f_s ()"> De rapide à lent </a> & nbsp; & nbsp; <r /> <br /> <a href = "#" onclick = "s_f (); return false"> de la lente à rapide à rapide </a> & nbsp; & nbsp; <br /> <br /> <div id = "box"> <h3> fast-> Slow <a href = "#" onclick = "closew ('box', '600px' . 600px ') "> [Close] </a> </h3> </div> <h3> Puisque nous avons fait cet effet, nous devons l'appliquer à la situation réelle </h3> <h3> maintenant, prenons un Regardez l'application réelle de l'effet tampon </h3> <div id = "my"> <a href = "#" class = "bt_down" onMouseover = "open_my ()"> mon </a> <div class = " my_ "id =" my_ "> <ul> <li> Mes sujets </li> <li> Ma collection </li> <li> Mes autorisations </li> <li> li> Mon vote </li> < Li> mes activités </li> <li> ma ville </li> <li> Mes œuvres </li> <li> Mon adresse </li> <li> Mon expertise </li> <li> Mes amis < / li> <li> mon espace </li> <li> <a href = "#" onclick = "close_my ('my _')"> CLOSE </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/20142426_8413_200801_20142426_8413_200801_20142426_8413_200801_20142426_8413 8_1164245_t.jpg "/ > </li> <li> <img src = "/ u / info_img / 2009-06 / 20 / work_291488_8330_20080829_151402_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_20080830_123900_9878235_T rc = " /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_ 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 /> <a href = " # "onClick =" Scrol (); Br /> bien sûr, l'effet ci-dessus est exactement ce que j'utilise pour démontrer l'effet tampon, <r /> <br /> Il ne convient pas à cela, l'effet est parce que la fonction que j'ai écrite ici ne sera transférée qu'une seule fois. < br /> <br /> si vous utilisez cette méthode plusieurs fois, il semble qu'il ne soit pas facile à réaliser. <br /> <br /> Enfin, je dirai, ne soyez pas mon code ici est effrayé, <br /> <br /> Il semble qu'il y ait beaucoup de code, principalement parce que les deux colonnes ci-dessous rendent le code beaucoup <br /> <br /> ce qui est vraiment important est f_s (), s_f () , clôture () <br /> <br /> Si vous pouvez le comprendre, alors vous pouvez en apprendre. <r /> <br /> C'est tout aujourd'hui. <br /> <br /> & 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; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; /> <script type = "text / javaScript"> Erreur de fonction () {var obj = document.getElementyid (s_img "); obj.scrollleft <obj_w) {obj.scrollleft = (obj.scrollleft + math.ceil ((obj_w-obj.scrollft) / 15); , 1)} Fonction Scrol () {var obj = document.getElementyid ("s_img"); .Scrollleft- = math.ceil (obj_w) / 50;} else {clearInterval (bw);}} var bw = window.setinterval (h, 1) //obj.scrollft -=parseint(obj.style.width); } </ script> </ body> </html>
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]

Pour les codes clés, veuillez lire ces deux:

fonction f_s () {
var obj = document.getElementById ("box"); // Obtenez l'objet avec la boîte d'identification
obj.style.display = "block"; // définir l'objet obj comme affichage
obj.style.width = "1px";
var changew = function () {// (à propos de la fonction, quelles fermetures, quel type de classe, prototype, je m'as fait dépasser. et le mettre dedans est stocké dans le changement variable)
var obj_w = parseInt (obj.style.width); // convertir la largeur de l'objet en une valeur numérique et le 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 augmente, l'incrément devient de plus en plus petit
}
autre{
ClearInterval (BW); // Si elle est supérieure ou égale à 600, SetInterval ne sera plus exécuté, ce qui signifie que la largeur sera arrêtée pour le moment.
}
}
var bw = window.setinterval (changew, 1) // appelle ChangeW toutes les 0,001 secondes
}

// lent à jeûner
// déclare une fonction s_f ()
fonction s_f () {
var obj = document.getElementById ("Box2");
var e_add = 1; // Initialiser l'incrément
obj.style.display = "bloc";
obj.style.width = "1px";
var changew = function () {// Ce que je comprends, c'est de créer une fonction directement et de la stocker dans la variable ChangeW
var obj_w; e_add
obj_w = parseInt (obj.style.width);
e_add * = 1,05; // la valeur incrémentée à partir de ce moment est
if (obj_w <600) {
obj.style.width = (obj_w + e_add) + "px"; // à mesure que la largeur augmente, l'incrément devient de plus en plus grand
}
autre{
ClearInterval (BW);
obj.style.width = "600px"; // La méthode de calcul (obj_w + e_add) dépassera la largeur prédéfinie, donc la largeur est réinitialisée après tampon.
}
}
var bw = window.setinterval (changew, 1)
}