Anfänger lernt Puffereffekt von mir

Autor：Eve Cole Aktualisierungszeit：2025-02-17 09:27:41

Zunächst möchte ich sagen, dass ich diese Artikel für diejenigen gewidmet ist, die wie mich lernen möchten Nicht auf der gleichen Ebene, ich benutze den redundanten Code, um diesen Effekt zu schreiben, mit dem Ziel, ihn zu verstehen, wenn wir nicht gefickt werden, werden wir auf die Dinge der Meister zurückblicken. Satz:
Eines Tages wirst du ein Meister (vorausgesetzt, du musst hart arbeiten, haha ^^)

Führen Sie die Codebox aus
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en : //www.w3.org/1999/xhtml "> <kopf> <meta http-equiv =" content-type "content =" text/html; Titel> </head> <style> Body {Schriftart Rand: 2px; BT_Down {Hintergrund: #DDDCE4 URL (/U/info_img/2009-06/20/Arrow_down.gif) No-Repeat 35px 46%; my_ {Hintergrund: #DDCE4; #my .my_ ul li {Breite: 48%; y: Hidden; Overflow-X: Hidden; 3px;} </style> <script> // Ich werde die Duplikate unten nicht kommentieren ~~ // schnell zu langsam von schnell zu langsam // eine Funktion f_s () Funktion f_s () {var obj = dokument deklarieren. getElementById ("Box"); // das Objekt Obj.Style.Display = "Block"; // das Objekt Obj festlegen, um obj.style.width = "1px" anzuzeigen; var changew = function () {// (über die Funktion, welche Schließungen, welche Art von Klassen, Prototypen, ich habe mich überfordert gemacht. Lassen Sie es uns in Zukunft langsam verstehen. Was ich hier verstehe, ist, eine Funktion direkt zu erstellen und sie in der variablen Änderung zu speichern) var obj_w = parseInt (obj.style.width); // Die Breite des Objekts in einen numerischen Wert konvertieren und in der variablen obj_w; if (obj_w <600) {// Richter, wenn der Breitenwert weniger als 600 obj.style.width = (obj_w+math.ceil ((600-obj_w)/15))+"px"; // Berechnen Sie die Berechnung des Breite des Objekts. . . Wenn die Breite wächst, wird das Inkrement immer kleiner} else {ClearInterval (BW); // Wenn es größer oder gleich 600 ist, wird SetInterval nicht mehr ausgeführt, was bedeutet, dass die Breite nicht mehr erhöht. }} var bw = window.setInterval (changeW, 1) // Ruf Änderung jeder 0.001 Sekunden} // Langsam von langsam zu schnell bis schnell // eine Funktion s_f () function s_f () {var obj = document.getElementById (deliTive eine Funktion (). "Box2"); Eine Funktion zählt direkt und speichert sie in der variablen Änderung var obj_w; e_add obj_w = parseInt (obj.style.width); .width = (obj_w+e_add)+"px"; // Wenn die Breite wächst, wird das Inkrement immer größer} else {ClearInterval (BW); E_ADD) Diese Berechnungsmethode überschreitet die vordefinierte Breite, sodass sie nach der Pufferung die Breite zurücksetzt. oder > 1) {obj.style.width = (obj_w-math.ceil (obj_w)/20)+"px"; // Berechnen Sie die Breite des Objekts. . . Wenn die Breite wächst, wird das Inkrement immer kleiner} else {ClearInterval (BW); // Die folgende Funktion besteht darin, meine ↓ -Funktion zu öffnen. obj.style.width = "1px"; Art von Klasse oder Prototypen haben mich in Zukunft große Kopfschmerzen. ; // die Breite des Objekts in einen numerischen Wert konvertieren und in der Variablen obj_w; Der Wert beträgt weniger als 600 obj.style.width = (obj_w+math.ceil ((200-obj_w)/20))+"px"; // Berechnen Sie die Breite des Objekts. . . Mit zunehmender Breite wird das Inkrement immer kleiner und kleiner obj.style ist größer oder gleich 600, setInterval wird nicht mehr ausgeführt, was bedeutet, dass die Breite zu diesem Zeitpunkt gestoppt wird. }} var bw = window.setInterval (changeW, 1) // Rufen Sie Änderungen auf alle 0,001 Sekunden auf} // Die folgende Funktion schließt die Layer -Funktion close_my (id) {var obj = document.getElementById (id); // das Objekt abrufen mit ID -Box var closeiv = function () {var obj_w = parseInt (obj.style.width); = (obj_w-math.ceil (obj_w)/20)+"px"; // Berechnen Sie die Breite des Objekts. . . Wenn die Breite wächst, wird das Inkrement immer kleiner und kleiner ";}} var bw = window.setInterval (closediv, 1) // Rufen Sie Änderungen auf alle 0,001 Sekunden auf} </script> <body> Erstens möchte ich sagen, dass diese Artikel dem gleichen wie ich diese gewidmet sind Wer studiert. Ich benutze den redundanten Code, um diesen Effekt zu schreiben, in der Hoffnung, dass wir ihn verstehen können, <br /> <br /> Wenn wir nicht gefickt werden, werden wir auf die Dinge der Meister zurückblicken Bitte glauben Sie diesen Satz: <br /> <br /> Eines Tages werde ich ein Meister (vorausgesetzt, Sie müssen hart arbeiten, haha ^^) <br /> <br /> <a href = "#" onclick = "f_s ()"> von schnell nach langsam </a> & nbsp; & nbsp; <br /> <br /> <a href = "#" onclick = "s_f (); return false"> von langsam zu fasten </a> & nbsp; & nbsp; <br /> <br /> <div id = "box"> <h3> fast-> langsam <a href = "#" onclick = "closew ('box', '600px' ) "> [Close] </a> </h3> </div> <div id =" box2 "> <h3> langsam-> schnell <a href ="#"onclick =" closew ('box2', ',' 600px ') "> [Close] </a> </h3> </div> <h3> Da wir diesen Effekt durchgeführt haben, müssen wir ihn auf die tatsächliche Situation anwenden </h3> <h3> Jetzt nehmen wir eine Sehen Sie sich die tatsächliche Anwendung des Pufferentffers an < /h3> <div id = "my"> <a href = "#" class = "bt_down" onmouseover = "open_my ()"> my < /a> <div class = " my_ "id =" my_ "> <ul> <li> Meine Themen </li> <li> Meine Sammlung </li> <li> Meine Berechtigungen </li> <li> li> meine Abstimmung </li> < li> meine Aktivitäten </li> <li> Meine Stadt </li> <li> Meine Werke </li> <li> Meine Adresse </li> <li> Mein Fachwissen </li> <li> Meine Freunde < /li> <li> Mein Speicherplatz </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/work_352426_8413_20080901_201448_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 .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_1710510_t.jpg"/> </li> </ul> </div> </div> <a href = " #"onclick =" scrol (); Br /> Natürlich ist der obige Effekt genau das, was ich benutze, um den Puffereffekt zu demonstrieren. Br /> <br /> Wenn Sie diese Methode oft verwenden, scheint es nicht einfach zu erreichen. <br /> <br /> Es scheint, dass es viel Code gibt, vor allem, weil die beiden folgenden Spalten den Code sehr aussehen <br /> <br />, was wirklich wichtig ist, ist f_s (), s_f () , CloseW () <BR /> <br /> Wenn Sie es verstehen können, können Sie davon lernen. <br /> <br /> Das ist alles heute. <br /> <br /> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbSp; /> <script type = "text/javaScript"> Funktionsfehler () {var obj = document.getElementById ("s_img"); obj.scrollleft <obj_w) {obj.scrollleft = (obj.scrollleft+math.ceil ((obj_w-obj.scrollleft)/15)); 1)} Funktion scrol () {var obj = document.getElementById ("s_img"); .Scrollleft- = math.ceil (obj_w)/50; } </script> </body> </html>
[Strg+A Alle Auswahltipps: Sie können zuerst einen Code ändern und dann Run drücken]

Für die Schlüsselcodes lesen Sie bitte diese beiden:

Funktion f_s () {
var obj = document.getElementById ("Box"); // das Objekt mit ID -Box abrufen
obj.style.display = "block"; // Setzen Sie das Objekt OBJ als Anzeige
obj.style.width = "1px";
var changew = function () {// (über die Funktion, welche Verschlüsse, welche Art von Klasse, Prototype, ich habe mich überwältigt gemacht. Lassen Sie uns es langsam in der Zukunft verstehen. Ich verstehe hier, eine Funktion zu erstellen und sie direkt zu zählen und in die variable Änderung wird es in die Lage versetzt)
var obj_w = parseInt (obj.style.width); // Die Breite des Objekts in einen numerischen Wert konvertieren und in der variablen obj_w;
if (obj_w <600) {// Richter, wenn der Breitenwert weniger als 600 beträgt
obj.style.width = (obj_w+math.ceil ((600-obj_w)/15))+"px"; // Berechnen Sie die Breite des Objekts. . . Wenn die Breite wächst, wird das Inkrement immer kleiner und kleiner
}
anders{
ClearInterval (BW); // Wenn es größer oder gleich 600 ist, wird SetInterval nicht mehr ausgeführt, was bedeutet, dass die Breite zu diesem Zeitpunkt gestoppt wird.
}
}
var bw = window.setInterval (changew, 1) // Rufen Sie alle 0,001 Sekunden auf wildew auf
}

// langsam zu fasten
// eine Funktion s_f () deklarieren
Funktion s_f () {
var obj = document.getElementById ("box2");
var e_add = 1; // Initialisieren inkrement
obj.style.display = "block";
obj.style.width = "1px";
var changeW = function () {// Ich verstehe, dass ich eine Funktion direkt erstellen und in der variablen Änderung speichern kann
var obj_w; e_add
obj_w = parsesint (obj.style.width);
e_add*= 1.05; // Der von da an erhöhte Wert ist IS inkrementiert
if (obj_w <600) {
obj.style.width = (obj_w+e_add)+"px"; // Wenn die Breite wächst, wird das Inkrement immer größer und größer
}
anders{
ClearInterval (BW);
obj.style.width = "600px"; // Weil (obj_w+e_add) Berechnungsmethode überschreitet die vordefinierte Breite, sodass die Breite nach der Pufferung zurückgesetzt wird.
}
}
var bw = window.setInterval (changeW, 1)
}