Heute habe ich zwei weitere Spezialeffekte codiert: Eine wird mit nativen Eingaben [Typ = Bereich] hergestellt und der andere vollständig angepasst; Das Folgende ist der vollständige Code und die Demonstration:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <style> #tip {Position: absolut; Top: 30px; links: 0; Rechts: 0; Breite: 200px; Höhe: 160px; Rand: Auto; Grenze: 1px Festgrau; Hintergrundfarbe: Cornsilk; } #tip div {Position: relativ; Breite: 100%; Höhe: 80px; Grenzboden: 1PX Festgrau; } .out {Position: relativ; Links: 16%; Anzeige: Inline-Block; Grenze: 2PX Solid Royalblue; Rand: 20px; Breite: 130px; Höhe: 20px; Hintergrundfarbe: LightGoldenRodyellow; } .in {display: block; Höhe: 20px; Zeilenhöhe: 20px; Text-Align: Recht; Farbe: weiß; Breite: 50%; background-image: linear-gradient(to right,powderblue 0%,#336699 50%,red 0px 1px rgba(0, 0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, Inset, 0px 1px Rgba (0, 0, 0, 0, 0, Einschub, 0px 1px Rgba (0, 0, 0, 0, 0,6) Einschub; Hintergrundfarbe: Lightskyblue; Border-Radius: 15px; Breite: 60%; Input [type = "]: 1px-Einschub; LightskyBlue; document.getElementById ('inner1'); Innere.Style.width = Bereich.Value+'%'; ID, ID1; Inner2.Style.width = (value) * a + 'px'; function () {console.log ('a:'+a+','+Wert: '+Wert); if (Wert <100) {Wert ++; ClearTimeOut (ID1); id="inner1">50</span> </span> <input id="range" type="range" min="0" max="100" step="1" value="50"> </div> <div id="d2"> <input id="btn1" type="button" value="<"> <span id="outer2"> <span id="inner2">50</span> </span> <input id = "Btn2" Typ = "Taste" value = ">"> </div> Drücken Sie die Taste für 0,5 Sekunden und ändert sich weiterhin!Die erste Implementierung ist sehr einfach, daher werde ich es nicht erklären, den Code selbst lesen.
Hier stellen wir hauptsächlich die Implementierung des zweiten Beispiels vor:
Wenn wir eine Anforderung oder die Spezialeffekte anderer Menschen sehen, beeilen Sie sich nicht, den Code anderer Menschen zu sehen. Denken Sie zuerst darüber nach, wie sollten Sie es erreichen? Stellen Sie Ihre Ideen zuerst heraus
Das Implementierungsprinzip dieses Spezialeffekts:
1. eine Spannweite innerhalb einer Zeitspanne;
• Außenspanne: Zeigen Sie nur Breite, Höhe, Rand, kein Hintergrund an
• Spannweite im Inneren: Die Höhe ist die gleiche wie die Außenseite, die Breite ist standardmäßig 50%. Setzen Sie zuerst die Hintergrundfarbe auf linearen Gradienten
2. Das Onclick -Ereignis der Taste ist relativ einfach. Klicken Sie darauf, um die Breite der Spannweite im Inneren zu ändern und die Nummer anzuzeigen.
3. Wenn die Taste onmouseDown ist, starten Sie den Timer und führen Sie die Funktion für Funktionsänderungen nach 500 ms aus. Die Änderungsfunktion ist eine Funktion, die sich mit SetTimeout zurückruft. Es wird einmal ohne 16,7 ms zurückgerufen, um einen Animationseffekt zu erzielen.
Schwierigkeitsanalyse:
1. Dieser Satz var a = parsefloat (Fenster.GetComputedStyle (OUTER2, NULL) .WIDTH)/100;
Wird verwendet, um den Anfangswert zu erhalten, wenn Sie Outer2.Style.width verwenden
Es lohnt sich nicht. Natürlich können Sie auch einen festen Wert festlegen, zum Beispiel kann er hier festgelegt werden
var a = 1,3,
Beachten Sie, dass die GetComputedStyle -Methode unter IE9 nicht unterstützt wird.
Das Elementobjekt von IE hat die aktuelle Style -Eigenschaft;
2. Dieser Satz
btn1.onmouseUp = function () {ClearTimeout (id1);
ClearTimeout (id)};
Es ist sehr wichtig. Ohne sie wird Onmosedown ausgelöst, bevor Onclick ausgelöst wird. Nach 500 ms beginnt es auszuführen, und dann wird der äußere Timer ausgeführt.
3. nichts anderes ist schwierig;
Dieses Beispiel erweitert sich tatsächlich auf viele andere Anwendungen, z. B. das Ersetzen der mittleren Anzeige durch Artikel, Bilder usw. und dann die Taste durch benutzerdefinierte Ersetzen. Der Effekt ist cool!
Wenn Sie denken, ich habe etwas Schlechtes über das Schreiben, weisen Sie bitte darauf hin!
Das obige einfache Beispiel für JavaScript Practical Combat (native Reichweite und benutzerdefinierte Spezialeffekte) ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.