Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern
|
In diesem Artikel wird ein Nachrichtenfeld mit Spezialeffekten vorgestellt, das mit nativem JS implementiert wurde. Der Effekt ist wie folgt:
Der Implementierungscode lautet wie folgt. Sie können ihn gerne kopieren und einfügen.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS zur Implementierung eines Nachrichtenfelds mit Spezialeffekten</title>
<Stil>
* {
Rand: 0;
Polsterung: 0
}
Textbereich {
Überlauf: automatisch;
Größenänderung: keine;
}
li {
Listenstil: keiner;
}
html {
Höhe: 100%;
}
Körper {
Hintergrund: #570226;
Höhe: 100%;
Schriftart: Arial, Helvetica, serifenlos;
}
h2 {
Schriftfamilie: Arial, Helvetica, serifenlos
}
.wickeln {
Breite: 740px;
Höhe: 498px;
Hintergrundfarbe: #a72244;
Rahmenradius: 30px;
Position: absolut;
oben: 50 %;
links: 50%;
Rand links: -370px;
Rand oben: -249px;
Überlauf: versteckt;
}
#Kopf {
Position: absolut;
links: 50px;
oben: 20px;
Schriftgröße: 20px;
Farbe: #fff;
Zeilenhöhe: 28px;
Textschatten: 2px 2px 0 #a72244;
}
#Kopf .Titel {
Position: absolut;
Breite: 340px;
oben: -100px;
}
#Kopf .url {
Schriftgröße: 14px;
Position: absolut;
oben: 28px;
Deckkraft: 0;
Filter: Alpha (Deckkraft = 0);
links: 700px;
Breite: 340px;
}
#Liste {
Position: absolut;
links: 164px;
oben: -100px;
}
#Liste li {
Position: absolut;
oben: 0;
links: 0;
}
.Liste-links {
Breite: 80px;
Höhe: 80px;
Hintergrundfarbe: rot;
Rahmenradius: 40px;
Position: relativ;
Textausrichtung: zentriert;
Zeilenhöhe: 80px;
Schriftgröße: 20px;
Farbe: #f8f8f8;
Z-Index: 5;
}
.text {
Breite: 0;
Höhe: 0;
Rand: 1px durchgezogen #4C4042;
Zeilenhöhe: 26px;
Schriftgröße: 12px;
Schriftfamilie: Arial, Helvetica, serifenlos;
Farbe: #000;
Position: absolut;
links: 30px;
oben: 20px;
Z-Index: 2;
Rahmenradius: 19px;
Gliederung: keine;
}
#btn {
Breite: 50px;
Höhe: 50px;
Hintergrundfarbe: rot;
Rahmenradius: 40px;
Position: absolut;
Textausrichtung: zentriert;
Schriftgröße: 12px;
Farbe: #fff;
Polsterung: 15px;
Zeilenhöhe: 20px;
Textdekoration: keine;
Z-Index: 20;
links: 335px;
oben: -240px;
}
</Stil>
<script src="js/public.js"></script>
<Skript>
fenster.onload = Funktion () {
zuKopf();
};
// Fröhliche Nachrichtenfeld-Texteffekte, sehr klassische Funktion toHead() {
var oHead = id("Kopf");
var oUrl = oHead.children[1];
var oTitle = oHead.children[0]
var aTitle = oTitle.innerHTML.split("");
var iNow = 0;
var oTimer = null;
var i = 0;
// "Happy Message Box" aufteilen für (i = 0; i < aTitle.length; i++) {
aTitel[i] = "<span>" + aTitel[i] + "</span>";
}
oTitel.innerHTML = aTitel.join("");
aTitel = oTitel.Kinder;
für (i = 0; i < aTitel.Länge; i++) {
aTitel[i].style.left = aTitel[i].offsetLeft + "px";
aTitel[i].style.top = aTitel[i].offsetTop + "px";
}
für (i = 0; i < aTitel.Länge; i++) {
aTitle[i].style.position = "absolut";
}
oTimer = Intervall setzen(
Funktion () {
if (iNow == aTitel.Länge) {
oTimer;
// www.baidu.com sportsstarMove(oUrl, { links: 0, Deckkraft: 100 }, 0, Funktion () {
// Titel QQ-Inhalt Sehr geehrte Damen und Herren, bitte vervollständigen Sie dies und beginnen Sie mit der Übung toList();
});
} anders {
// Bewegung der Happy-Message starMove(aTitle[iNow], { top: 100 }, 1);
iJetzt++;
}
},
50);
};
Funktion toList() {
var oList = id("Liste");
var oBtn = id("btn");
var aLi = oList.getElementsByTagName("li");
var aText = getClass('text', oList);
var aStyle = [
{
Höhe: 26,
Breite: 246,
Polsterung Unten: 5,
Polsterung oben: 5,
paddingLeft: 50,
Polsterung rechts: 50
},
{
Höhe: 26,
Breite: 246,
Polsterung Unten: 5,
Polsterung oben: 5,
paddingLeft: 50,
Polsterung rechts: 50
},
{
Höhe: 140,
Breite: 246,
Polsterung Unten: 5,
Polsterung oben: 5,
paddingLeft: 50,
Polsterung rechts: 50
}
];
var i = 0;
für (i = 0; i < aLi.Länge; i++) {
aLi[i].style.zIndex = aLi.Länge - i;
}
starMove(oList, { oben: 94 }, 1, Funktion () {
starMove(einText[0], einStil[0], 1);
starMove(aLi[2], { top: 85 }, 1);
starMove(aLi[1], { oben: 85 }, 1, Funktion () {
starMove(einText[1], einStil[1], 1);
starMove(aLi[2], { oben: 170 }, 1, Funktion () {
starMove(einText[2], einStil[2], 1, Funktion () {
starMove(oBtn, { oben: 0 }, 1);
});
});
});
});
};
</Skript>
</Kopf>
<Text>
<div Klasse="wrap">
<form method="get" id="form">
<h2 id="Kopf">
<strong class="title">Glückwunsch-Nachrichtenbox</strong>
<span class="url">www.baidu.com</span>
</h2>
<div id="Liste">
<ul>
<li>
<h3 class="list-left">Titel</h3>
<input type="text" value="" class="text" name="title" disabled="deaktiviert" />
</li>
<li>
<h3 Klasse="Liste-links">QQ</h3>
<input Typ="text" Wert="" Klasse="text" Name="QQ" deaktiviert="deaktiviert" />
</li>
<li>
<h3 class="list-left">Inhalt</h3>
<textarea class="text text1" name="content" disabled="disabled"></textarea>
</li>
</ul>
<a href="javascript:;" id="btn">Liebe/r, bitte <br />vervollständigen Sie dies</a>
</div>
</form>
</div>
</body>
</html>Nachfolgend finden Sie den wichtigsten oben vorgestellten public.js-Code, der viele nützliche Methoden kapselt.
Funktions-ID(id) {
gibt document.getElementById(id) zurück;
}
Funktion toBrowser() {
var Browser = Navigator.AppName;
var b_version = navigator.appVersion;
wenn (Browser == "Netscape") {
gibt true zurück;
}
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" || trim_Version == "MSIE6.0" || trim_Version == "MSIE8.0")) {
gibt false zurück;
}
anders {
gibt true zurück;
}
}
Funktion starMove(Objekt, Ziel, iType, fnEnd, iDate) {
wenn (Objekt.Timer) {
Intervall löschen(Objekt.Timer);
}
wenn (iType == 1) {
var sAttr = "";
obj.iSpeed = {};
für (sAttr im Ziel) {
obj.iSpeed[sAttr] = 0;
}
}
wenn (Ziel["transformieren"]) {
wenn (Objekt["transformieren"]) {
Ziel["transformieren"] += Objekt["transformieren"];
}
anders {
css(obj, sAttr, 0);
}
}
Schalter (iType) {
Fall 0:
obj.timer = setInterval(Funktion () { doMoveBuffer(Obj, Ziel, fnEnd); }, 24);
brechen;
Fall 1:
obj.timer = setInterval(Funktion () { domoveFlexible(Obj, Ziel, fnEnd); }, 24);
brechen;
}
}
Funktion doMoveBuffer(Objekt, Ziel, fnEnd) {
var sAttr = "";
var iEnd = 1;
für (sAttr im Ziel) {
if (toBrowser() == false && target["transform"]) {
weitermachen;
}
var iNow = parseFloat(css(obj, sAttr));
wenn (iNow == Ziel[sAttr]) {
weitermachen;
}
anders {
var iSpeed = (Ziel[sAttr] – iNow)/5;
iGeschwindigkeit * = 0,75;
wenn (iSpeed > 0) {
iSpeed = Math.ceil(iSpeed);
}
anders {
iSpeed = Math.floor(iSpeed);
}
css(obj, sAttr, iNow += iSpeed);
iEnde = 0;
}
}
wenn (iEnde) {
Intervall löschen(Objekt.Timer);
wenn (fnEnde) {
fnEnd.call(obj);
}
}
}
Funktion domoveFlexible(Objekt, Ziel, fnEnd) {
var sAttr = "";
var iEnd = 1;
für (sAttr im Ziel) {
if (toBrowser() == false && target["transform"]) {
weitermachen;
}
var iNow = parseFloat(css(obj, sAttr));
obj.iSpeed[sAttr] += (Ziel[sAttr] - iNow) / 5;
obj.iSpeed[sAttr] *= 0,75;
wenn (Math.round(iNow) == Ziel[sAttr] && Math.abs(Obj.iSpeed[sAttr]) < 1) {
weitermachen;
}
anders {
iNow = Math.round(iNow + obj.iSpeed[sAttr]);
css(obj, sAttr, iNow);
iEnde = 0;
}
}
wenn (iEnde) {
Intervall löschen(Objekt.Timer);
wenn (fnEnde) {
fnEnd.call(obj);
}
}
}
Funktion CSS (Objekt, Attribut, Wert) {
wenn (Argumente.Länge == 2) {
wenn (attr == "transformieren") {
gib obj.transform zurück;
}
var i = parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
var val = i? i: 0;
wenn (attr == "Deckkraft") {
Wert *= 100;
}
Rückgabewert;
}
sonst wenn (Argumente.Länge == 3) {
Schalter (Attr) {
Fall 'Breite':
Fall 'Höhe':
Fall 'paddingLeft':
Fall 'paddingTop':
Fall 'paddingRight':
Fall 'paddingBottom':
Wert = Math.max(Wert, 0);
Fall 'links':
Fall 'oben':
Fall 'marginLeft':
Fall 'marginTop':
Fall 'marginRight':
Fall 'marginBottom':
obj.style[attr] = Wert + "px";
brechen;
Fall 'Opazität':
wenn (Wert < 0) {
Wert = 0;
}
obj.style.filter = "Alpha(Deckkraft:" + Wert + ")";
obj.style.opacity = Wert / 100;
brechen;
Fall 'transformieren':
obj.transform = Wert;
obj.style["transform"] = "rotieren(" + Wert + "Grad)";
obj.style["MsTransform"] = "drehen(" + Wert + "Grad)";
obj.style["MozTransform"] = "drehen(" + Wert + "Grad)";
obj.style["WebkitTransform"] = "drehen(" + Wert + "Grad)";
obj.style["OTransform"] = "drehen(" + Wert + "Grad)";
brechen;
Standard:
obj.style[attr] = Wert;
}
Rückgabefunktion (attr_in, wert_in) { css(obj, attr_in, wert_in) };
}
}
Funktion getClass(sClass, obj) {
var aRr = [];
wenn (Objekt) {
var aTag = obj.getElementsByTagName('*');
}
anders {
var aTag = document.getElementsByTagName('*');
}
für (var i = 0; i < aTag.Länge; i++) {
var aClass = aTag[i].className.split(" ");
für (var j = 0; j < aClass.length; j++) {
wenn (eineKlasse[j] == sKlasse) {
aRr.push(aTag[i]);
}
}
}
Rückkehr aRr;
}
Funktion nachClient(Objekt, Attribut) {
if (attr == "Breite") {
returniere css(obj, "Rand links") + css(obj, "Rand rechts") + css(obj, "Padding links") + css(obj, "Paddingbreite") + css(obj, "Paddingbreite");
}
sonst wenn (attr == "Höhe") {
return css(obj, "Rand oben") + css(obj, "Rand unten") + css(obj, "Polsterung oben") + css(obj, "Polsterung unten") + css(obj, "Polsterungshöhe");
}
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: So implementieren Sie Web-Stresstests mit Apache Bench
Artikel empfehlen
Tutorial der MySQL-Reihe zum Verständnis der Verwendung der Schlüsselwörter „union“ (alles), „limit“ und „exists“
Inhaltsverzeichnis 1.union: Sie können Abfrageerg...
JavaScript implementiert die Kontrollkästchenauswahlfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu
Melden Sie sich zuerst bei MySQL an Shell> MyS...
Detaillierte Erklärung, wie man HSTS in nginx aktiviert, um den Browser zu zwingen, auf HTTPS-Zugriff umzuleiten
Im vorherigen Artikel haben wir den lokalen Knote...
Linux verwendet stty zum Anzeigen und Ändern von Terminalzeileneinstellungen
Sttty ist ein gängiger Befehl zum Ändern und Druc...
Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen
Vorwort Während des Schreibens des Codes werden w...
So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit
Egal ob Sie Webdesigner oder UI-Designer sind, di...
Ein QQ-Chatroom basierend auf vue.js
Inhaltsverzeichnis Einführung Nachfolgend sehen S...
React verwendet Emotionen zum Schreiben von CSS-Code
Inhaltsverzeichnis Einführung: Installation von E...
JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts
JavaScript-Umschalteffekt für Bekleidungsalben (ä...
Bereitstellung und Konfiguration des Apache-Dienstes unter Linux
Inhaltsverzeichnis 1 Die Rolle von Apache 2 Apach...
Linux-Swap-Partition (ausführliche Erklärung)
Inhaltsverzeichnis linux 1. Was ist SWAP 2. Was p...
So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen
Vorne geschrieben Ich weiß nicht, wer als Erster ...
JS realisiert die Berechnung des Gesamtpreises der Waren im Warenkorb
JS berechnet den Gesamtpreis der Waren im Warenko...
Zusammenfassung der Updates und gefundenen Probleme des Docker Consul-Containerdienstes
Inhaltsverzeichnis 1. Container-Service-Update un...