Rookie, lerne Puffereffekt von mir

Autor：Eve Cole Aktualisierungszeit：2009-06-20 16:54:28

Zunächst möchte ich sagen, dass ich es bin und diese Artikel denjenigen gewidmet sind, die wie ich lernen möchten. Mehrere Freunde im Forum haben Puffereffekte gepostet, aber es ist wirklich schmerzhaft für mich, ihren Code zu lesen. Da sie nicht auf dem gleichen Niveau sind, verwende ich den redundantsten Code, um diesen Effekt zu schreiben. Der Zweck besteht darin, zu hoffen, dass Sie ihn verstehen können. Wenn wir nicht gut darin sind, werden wir uns die Dinge noch einmal ansehen Meister. Bitte glauben Sie diesem Satz:
Eines Tages wirst du ein Meister werden (vorausgesetzt, du arbeitest hart, haha^^)

Codefeld ausführen
<!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" /> <title>Unbenanntes Dokument</; title> </head> <style> body {font-size:12px} #box {background:#FFFFCC; border:1px solid #FFCC66;width:none:right; margin:2px;overflow:hidden} bt_down {background: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) no-repeat 35px 46%; padding:5px 20px 5px 5px; text-align:left} #my {} #my . my_ {background:#DDDCE4; width:150px; display:none; overflow:hidden} #my .my_ ul li { width:48%; float:left; border-height:1px solid #B6B6C0} #s_img { width:430px; y:hidden;overflow-x:hidden; border:1px solid #ccc} #imgs ul { list-style:none-left:0} #imgs ul li{ float:left; 3px;} </style> <script> //Ich werde die unten wiederholten ähnlichen nicht kommentieren~~ //schnell bis langsam //Funktion deklarieren f_s() function f_s(){ var obj= document.getElementById( "box"); //Objekt mit der ID-Box abrufen obj.style.display="block"; //Objekt obj auf Anzeige festlegen obj.style.width="1px" //Objekt festlegen obj Die Breite ist 1px var changeW=function(){ //(Über Funktionen, Abschlüsse, Klassen und Prototypen macht es mir großen Kopf. Ich werde es später verstehen. Was ich hier verstehe, ist, ein Funktionsliteral zu erstellen und es in der Variablen changeW) zu speichern. var obj_w=parseInt(obj.style.width);//Konvertieren Sie die Breite des Objekts in einen numerischen Wert und speichern Sie es in der Variablen obj_w; if (obj_w<600){ //Beurteilen Sie, ob der Breitenwert kleiner als 600 ist obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Berechnen Sie die Breite des Objekts. . . Mit zunehmender Breite 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 zu diesem Zeitpunkt nicht mehr zunimmt . } } var bw=window.setInterval(changeW,1)//ChangeW alle 0,001 Sekunden aufrufen } //langsam bis schnell //Funktion deklarieren s_f() function s_f(){ var obj=document.getElementById ("box2") ; var e_add=1;//Initialisierungsinkrement obj.style.display="block"; var changeW=function(){//Was ich verstehe, ist, eine direkte Funktion zu erstellen value und speichert ihn in der Variablen changeW var obj_w;e_add obj_w=parseInt(obj.style.width);//Der Wert, der sich danach jedes Mal erhöht, ist if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";//Wenn die Breite länger wird, wird das Inkrement immer größer} else{ clearInterval(bw); obj.style.width="600px";// Aufgrund der Berechnungsmethode von (obj_w+e_add) wird die vordefinierte Breite überschreiten, daher wird seine Breite nach dem Puffern zurückgesetzt. Dies erzeugt eine Illusion, haha} } var bw=window.setInterval(changeW,1) } // Ebenenfunktion schließen closeW(id,w) { var obj=document.getElementById(id);//Holen Sie sich das Objekt mit der ID-Box obj.style.width=w; var closeDiv=function(){ var obj_w=parseInt(obj. style.width); if(obj_w> 1){ obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Berechne die Breite des Objekts. . . Mit zunehmender Breite wird das Inkrement immer kleiner.} else{ clearInterval(bw); obj.style.display="none"; } var bw=window.setInterval(closeDiv,1)//Aufruf alle 0,001 Sekunden Eins changeW } //Die folgende Funktion soll meine ↓-Funktion öffnen open_my(){ var obj=document.getElementById("my_");//Das Objekt mit der ID-Box abrufen obj.style.display="block";// Set das anzuzeigende Objekt obj.style.width="1px"; //Setzen Sie die Breite des Objekts obj auf 1px obj.style.height="1px"; var changeW=function(){ //(Über die Funktion, Was Abschlüsse, Klassen und Prototypen für mich verwirrend sind, werde ich später verstehen. Was ich hier verstehe, ist, ein Funktionsliteral zu erstellen und es in der Variablen zu speichern Wandeln Sie die Breite des Objekts in einen numerischen Wert um und speichern Sie ihn in der Variablen obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //Beurteilen Sie, ob die Breite der Wert ist kleiner als 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//Berechne die Breite des Objekts. . . Mit zunehmender Breite wird das Inkrement immer kleiner obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px"; Wenn es größer oder gleich 600 ist, wird setInterval nicht mehr ausgeführt, was bedeutet, dass die Breite zu diesem Zeitpunkt nicht mehr zunimmt. } } var bw=window.setInterval(changeW,1)//ChangeW alle 0,001 Sekunden aufrufen } //Die folgende Funktion dient zum Schließen meiner ↓ angezeigten Ebenenfunktion close_my(id){ var obj=document.getElementById(id );/ /Holen Sie sich das Objekt mit der ID-Box 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";//Berechne die Breite des Objekts. . . Mit zunehmender Breite wird das Inkrement immer kleiner obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px" } else{ clearInterval(bw); none"; } } var bw=window.setInterval(closeDiv,1)//ChangeW alle 0,001 Sekunden aufrufen } </script> <body> Zunächst möchte ich sagen, dass diese Artikel Menschen gewidmet sind, die dasselbe wollen Dinge wie ich Diejenigen, die lernen.<br /><br /> Mehrere Freunde im Forum haben Puffereffekte gepostet, aber es ist wirklich schmerzhaft für mich, ihre Codes anzusehen, weil sie nicht auf dem gleichen Niveau sind.<br / ><br />Also verwende ich den redundantesten Code, um diesen Effekt zu schreiben. Der Zweck besteht darin, zu hoffen, dass die Leute ihn verstehen können.<br /><br />Wenn wir nicht gut darin sind, schauen wir noch einmal nach in den Dingen der Meister. <br /><br /> Zum Schluss glauben Sie bitte diesem Satz:<br /><br /> Eines Tages werden Sie ein Meister (vorausgesetzt, Sie arbeiten hart, haha^^)<br / ><br /> < a href="#" onclick="f_s()">Von schnell zu langsam</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">Von langsam nach schnell</a>  <br /><br /> <div id="box" ><h3>Schnell->Langsam<a href="#" onclick="closeW(' box','600px')">[Schließen]</a></h3></div> <div id="box2" ><h3>Langsam->Schnell<a href=" #" onclick="closeW ('box2','600px')">[Schließen]</a></h3></div> <h3>Da wir nun diesen Effekt erstellt haben, müssen wir ihn in der Praxis anwenden< /h3 > <h3>Werfen wir nun einen Blick auf die tatsächliche Anwendung des Puffereffekts</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >Mein< /a> <div class="my_" id="my_" > <ul> <li>Meine Themen</li> <li>Meine Sammlungen</li> <li>Meine Berechtigungen</li> < li>Meine Stimme</li> <li>Meine Aktivitäten</li> <li>Meine Stadt</li> <li>Meine Werke</li> <li>Meine Adresse</li> < li>Meine Expertise< /li> <li>Meine Freunde</li> <li>Mein Bereich</li> <li><a href="#" onclick="close_my('my_')"> Schließen</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- 20.06./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_ 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_1710 510_t.jpg" /></li > </ul> </div> < /div><br /> <a href="#" onclick="scrol(); return false">Nach links scrollen</a> <a href="#" onclick="scror() ; return false">Scrollen richtig</a><br /><br /> Der obige Effekt wird von mir natürlich nur verwendet, um den Puffereffekt zu demonstrieren.<br /><br /> Er ist für diese Art von Effekt nicht geeignet Das liegt daran, dass die Funktion, die ich hier geschrieben habe, nur einmal übertragen wird.<br /><br /> Es scheint nicht sehr einfach zu sein, diese Methode mehrmals zu verwenden.<br /><br /> Abschließend möchte ich sagen: Tun Sie es nicht Lass mich täuschen. Der Code hier macht mir Angst,<br /><br />Es sieht nach viel Code aus, vor allem wegen der letzten beiden Beispiele, die den Code viel aussehen lassen<br /><br /> Was Was wirklich wichtig ist, ist f_s(), s_f(),closeW()<br /><br /> Wenn Sie es verstehen können, können Sie auch Rückschlüsse ziehen.<br /><br /> Das war's für heute Ich hoffe, diese Dinge können Ihnen weiterhelfen ^^<br /><br /> ;           <script type="text/javascript"> function 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; } var bw =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width ); } </script> </body> </html>
[Strg+A Alle Auswahltipps: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Bitte schauen Sie sich diese beiden Tastencodes an:

//langsam nach schnell, von langsam nach schnell
//Eine Funktion deklarieren s_f()
Funktion s_f(){
var obj=document.getElementById("box2");
var e_add=1;//Initialisierungsinkrement
obj.style.display="block";
obj.style.width="1px";
var changeW=function(){//Was ich verstehe, ist, ein Funktionsliteral zu erstellen und es in der Variablen changeW zu speichern
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//Der Wert jedes nachfolgenden Inkrements beträgt
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//Je länger die Breite wird, desto größer wird das Inkrement
}
anders{
clearInterval(bw);
obj.style.width="600px";//Da (obj_w+e_add) diese Berechnungsmethode die vordefinierte Breite überschreitet, wird ihre Breite nach dem Puffern zurückgesetzt. Dies erzeugt eine Illusion, haha
}
}
var bw=window.setInterval(changeW,1)
}