Heim > Artikel > Backend-Entwicklung > jQuery implementiert das Effektbeispiel für die Ein- und Ausblendfunktion von IE6
jQuery implementiert das Effektbeispiel für die Ein- und Ausblendfunktion von IE6
- 小云云Original
- 2018-02-05 13:28:131416Durchsuche
In diesem Artikel wird hauptsächlich die Implementierung der mit IE6 kompatiblen Ein- und Ausblendeffekt-Warnungsaufforderungsfunktion in jQuery vorgestellt. Er analysiert die spezifischen Implementierungsschritte und zugehörigen Betriebstechniken der jQuery-Popup-Warnungsaufforderungsfunktion in Form von Konkrete Beispiele. Freunde, die es brauchen, können sich darauf beziehen. Ich hoffe, es kann allen helfen.
Eigentlich denke ich, dass es am besten ist, einen Alert direkt für Alarmaufforderungen zu verwenden. Kommen Sie direkt auf den Punkt und lassen Sie die Benutzer die Bedeutung Ihres aktuellen Systems verstehen. Der Schlüssel ist, dass Alert mit jedem Browser kompatibel sein muss, egal wie kaputt er ist. Andernfalls werden Sie ein dummer Browser sein. Heutzutage gelten Warnungen jedoch zunehmend als unansehnlich und es gibt den Trend, dass „Popup-Fenster beängstigend sind“. Deshalb müssen Sie Warnungen besser aussehen lassen. Unter der Voraussetzung, dass es schwierig ist, die Transparenz von Javascript zu steuern, ist der einfache Fade-Effekt von jQuery Ihre Wahl. Der Grund, warum ich mich für jQuery entschieden habe, ist, dass es gut mit IE6 kompatibel ist.
1. Grundziel
Wenn die Anzahl der Zeichen im Eingabefeld sowohl auf Chinesisch als auch auf Englisch mehr als 10 beträgt. Es wird ein Alarm angezeigt. Der spezifische Effekt ist wie folgt: Der Test wurde in der IE6-Umgebung bestanden.
2. HTML-Layout
Das p-Layout wird hier verwendet, das Tabellenlayout jedoch nicht gebraucht. Informationen zum spezifischen Float-Layout finden Sie unter „P+CSS-Webseiten-Layout-Fähigkeiten erlernen“. Ich werde hier nicht auf Details eingehen:
<!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" /> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <title>告警提示</title> </head> <body> <p style="float:left;">内容：</p><p id="errMsg" style="color:#ff0000;display:none;float:left;">错误！</p> <p style="clear:both;"></p> <p> <textarea onchange="errTipsAlert(this)"></textarea><br /> </p> </body> </html>
Ich hoffe, jeder hat bemerkt, dass diese Alarmfunktion durch die Änderung des mehrzeiligen Textfelds ausgelöst wird. Wenn sie ausgelöst wird, übergibt sie sich an diese Funktion. Gleichzeitig wurde der Alarmtext eingestellt, dieser ist jedoch zunächst ausgeblendet.
Achten Sie gleichzeitig darauf, jquery zu Beginn einzuführen.
3. JQuery-Skript
Der Grund, warum FadeTo0 hier zum Ausblenden verwendet wird, ist nicht wie „JQ verwenden, um das grundlegendste zu schreiben“. Der Ein- und Ausblendeffekt wird mit show() und hide() angezeigt, da show() und hide() nicht über den Ein- und Ausblendeffekt verfügen. FadeIn und FadeOut führen dazu, dass sich der Text verschiebt, was nicht gut aussieht.
<script>
function errTipsAlert(obj){
//obj把自己传递过来了，如果多行文本框里面的内容多于10个字
if(obj.value.length>10){
//那么错误提示文本errMsg就一开始在1秒之内透明度从0变成1，之后又在1秒之内透明度从1变成0，再同理变回来，从而实现淡入淡出的闪烁提示。
$("#errMsg").fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
//然后多行文本框的边框加粗，变红
$(obj).css("border","2px solid #ff0000");
}
else{
//否则错误提示文本errMsg就在1毫秒内透明变变成0，相当于hide()方法，但是hide()在某些情况下会发生移位。
$("#errMsg").fadeTo(1,0);
//恢复多行文本框的边框
$(obj).css("border","1px solid #cccccc");
}
}
</script>Animieren Sie keine mehrzeiligen Textfelder. Obwohl Sie die Eigenschaft „borderwidth“ wie „jQuery-Schleifenanimation und Komponentengröße abrufen“ animieren können, bleibt diese Animation sehr hängen. Es ist also besser, dies nicht zu tun.
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonjQuery implementiert das Effektbeispiel für die Ein- und Ausblendfunktion von IE6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!