Hier ist ein Spezialeffekt von JavaScript -Werbung, der Effekt ist wie folgt:
Nicht nur die Wirkung des folgenden Bildes kann auch mit der Maus gedreht werden. Dies ist nur ein einfaches und unmodifiziertes Beispiel. Basierend auf diesem Beispiel kann es die Werbung mehr Spaß machen. Zögernde Männer, können Sie eine solche Webseite zu Ihrem kleinen Loli veröffentlichen? Großartig.
Veröffentlichen Sie den Code:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Titel hier einfügen </title>
<style type = "text/css">
Körper{
Grenze: 1px rote Feststoff;
Breite: 1000px;
Höhe: 1000px;
Rand: 0px Auto;
Polsterung: 0px;
Farbe: grün;
}
/*
Ziehen Sie das Objekt aus dem Dokumentstrom mit Eigenschaften wie links, rechts, oben, unten usw. relativ zu Eigenschaften
Es ist dem am stärksten positioniertesten übergeordneten Objekt für die absolute Positionierung. Wenn ein solches übergeordnetes Objekt nicht existiert,
Durch Körperobjekt. Und seine Kaskade wird durch das Z-Index-Attribut definiert
*/
div {
Position: absolut;
}
</style>
<script type = "text/javaScript">
// Warum sollte ich Onload verwenden? Denn als ich die Div der Uhr im JavaScript -Code initialisiere, stellte die Debug -Seite fest, dass es keine Implementierung gab
// Später fand ich den Grund heraus, dass der HTML -Code von vorne nach hinten analysiert wurde. Wenn Sie zuerst JavaScript -Code analysieren, gehen Sie zum Körper
// beim Hinzufügen von untergeordneten Knoten kann der ungelöste Körper nicht gefunden werden. Also solltest du zuerst den Körper analysieren. Es gibt zwei Methoden, einer ist
Die Schreibmethode von // kann eine andere Möglichkeit sein, die Onload -Methode zum Body -Tag hinzuzufügen.
window.onload = function () {
init ();
};
// Definieren Sie ein Div -Array, um 12 Divs zu speichern
// Bestimmen Sie aufgrund der Beziehung zwischen den 12 Div -Positionen zuerst den Punkt und den Radius, um die Position des DIV zu berechnen
var divs = [];
var lovebaby = ["i", "love", "du", "du", "bao", "bei", "love", "love", "me", "wan", "wan", "wan", "wan" "wan" "wan" "" "w Ein "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" W. Ein "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" "wan" "wan" "wan" "wan" "" wan "" "" "" "" " an"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"""wan"
var cx = 300;
var cy = 300; // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var r = 150;
var divcenternode; // Die Position des Mittelpunkts sollte kontrolliert werden und globale Variablen sollten festgelegt werden
// eine initialisierte Funktion definieren
Funktion init () {
// Erstellen Sie eine DIV in der Mittepunktposition (Sie können das Werbeobjekt schreiben)
divcenternode = document.createelement ("div");
divcenternode.innerhtml = "Tinging, heirate mich!";
document.body.Appendchild (Divcenternode);
divcenternode.style.left = (cx-50)+"px";
divcenternode.style.top = (cy-30)+"px";
// Erstellen Sie 12 Divs, um eine verbotene Uhr zu bilden und sie in den Körper zu legen
für (var x = 1; x <= 12; x ++) {
// Erstellen Sie eine Div
var divnode = document.createelement ("div");
divnode.innerhtml = lovebaby [x-1];
// Das Körperobjekt muss nicht wie andere Objekte erhalten werden, und die JS -Bibliothek wurde eingekapselt.
document.body.Appendchild (Divnode);
divs.push (Divnode);
}
// Jedes Mal, startclock () wird begonnen, das Div -Element neu zu positionieren
/*
Um den Rotationseffekt zu erzielen, ist es notwendig, kontinuierlich auszugleichen oder
Neupositionierung, aber Looping können Sie nicht steuern, wie lange es dauert, um die Funktion zu starten
Zu diesem Zeitpunkt bietet das Fensterobjekt eine Methode.
*/
startclock ();
}
// Divs Offset
var offset = 0; // Grad Offset
// eine Funktion definieren, um die Position separat zu positionieren und zu drehen
Funktion startClock () {
für (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// Der Grad jeder Zahl
var dushu = 30*x+offset;
// Winkelwert* math.pi /180 = Strahlwert
var divleft = cx+r*math.sin (Dushu*math.pi/180);
div.style.left = divleft+"px";
var divtop = cy-r*math.cos (Dushu*math.pi/180);
div.style.top = divtop+"px";
}
Offset+= 50;
// ein bestimmtes Intervall, rufen Sie diese Funktion auf
// Ein Ausdruck wird nach dem angegebenen Millisekundenwert berechnet. Der erste Parameter ist der Ausdruck, der zweite Parameter ist die Zeit
setTimeout (startclock, 80); // Methode des Fensterobjekts
}
// Definieren Sie diese Uhr in verschiedenen Positionen, wenn sich die Maus bewegt
Funktion clockmove (Ereignis) {
Cx = event.clientX; // Das X-Koordinat der Mausposition
Cy = event.clienty; // das y-koordinierte der Mausposition
divcenternode.style.left = (cx-50)+"px";
divcenternode.style.top = (cy-30)+"px";
}
</script>
</head>
<body onmousemove = "clockmove (Ereignis)">
<!-
1. Zeigen Sie 12 Zahlen in einem Kreis an
1/12 Divs erstellen, Werte 1-12 zuweisen
2/12 Divs lokalisieren und einen Kreis bilden.
->
</body>
</html>
Ich wollte ursprünglich ein Taktdisplay erstellen, das sich drehen und laufen konnte. Die Benennung im Code hängt also mit der Uhr zusammen, daher werde ich nicht verwirrt, Liebes. Anfänger in JavaScript bin ich der Meinung, dass JavaScript sehr mächtig ist.