Sport in JavaScript werden häufig auf der Website verwendet. Dieses Mal werde ich Ihnen einige grundlegende Anwendungen des Sports teilen. Es ist bequem für alle, während der Entwicklung direkt zu verwenden.
Der Code ist einfach und leicht zu verstehen und für Anfänger geeignet. Schließlich werde ich Schritt für Schritt meinen eigenen Sport -Framework aussortieren.
Bewerbungsfall -Renderings:
Bewegen Sie die Maus zum Teilen und die DIV links wird angezeigt. Entfernen Sie und erholen Sie sich von Ihnen. Ich glaube, dass jeder dieses sehr praktisch verwenden wird. Mal sehen, wie der Code implementiert wird.
Die Codekopie lautet wie folgt:
<style type = "text/css">
#div1 {
Breite: 150px;
Höhe: 200px;
Hintergrund: grün;
Position: absolut;
links: -150px;
}
#div1 span {
Position: absolut;
Breite: 20px;
Höhe: 60px;
Zeilenhöhe: 20px;
Hintergrund: Blau;
Rechts: -20px;
Top: 70px;
}
</style>
Die Codekopie lautet wie folgt:
<body>
<div id = "div1">
<spann>
Teilen an
</span>
</div>
</body>
Das Folgende ist der JavaScript -Code
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var odiv = document.getElementById ("div1");
odiv.onmouseover = function () {
startMove (0);
};
odiv.onmouseout = function () {
startMove (-150);
};
}
var time = null;
Funktion startMove (ITRAGET) {
var odiv = document.getElementById ("div1");
ClearInterval (Zeit);
time = setInterval (function () {
var speed = 0;
if (odiv.offsetleft> itRaget) {
Geschwindigkeit = -10;
}anders{
Geschwindigkeit = 10;
}
if (odiv.offsetleft == ITRAGET) {
ClearInterval (Zeit);
}anders{
odiv.style.left = odiv.offsetleft+speed+'px';
}
}, 30);
}
</script>
Ideen:
Die anfängliche links im Stil beträgt -150. Das DIV wird im Inneren geschrumpft und wird angezeigt, wenn 0 angegeben ist. Dann müssen wir nur diesen Wert ändern
Der Parameter iTarget in startMove ist der Zielpunkt, der angibt, welchen Zielpunkt Sie anhalten.
Die Steuerung der Geschwindigkeitsgröße kann die Geschwindigkeit der Bewegung steuern. Wenn der Zielpunkt erreicht ist, stoppen Sie den Timer.
Gesetz:
* Annahme
* Links: 30 ITarget: 300 Es wird nach rechts als positiv erhalten
* Links: 600 ITarget: 50 Es ist links negativ
*
* Die Beziehung zwischen der aktuellen Position links und dem Zielpunkt itarget fördert die positive und negative Geschwindigkeit
Hinweis: Der Timer muss ausgeschaltet sein, sobald Sie beginnen, denn jedes Mal, wenn Sie zum Teilen umziehen, wird ein Timer eingeschaltet. Je mehr Sie einschalten, desto schneller wird die Geschwindigkeit, da es gleichzeitig mehrere Timer ausführen kann.
Jedes Mal müssen Sie sicherstellen, dass ein Timer funktioniert.
Folgen Sie: Die gleiche Funktionsfunktion, desto weniger Parameter, desto besser, desto besser. Nach den obigen Regeln wird die Geschwindigkeit nicht als Parameter übergeben.
Ein Beispiel im Leben zu geben: Es ist im Allgemeinen unmöglich, ein Taxi zu nehmen und dem Taxifahrer mitzuteilen, dass er 100 Meter hat, wohin er erreicht ist. Sie können dem Meister nicht sagen, wie schnell Sie rennen möchten
Das Programm ist also gleich, so dass der Geschwindigkeitsparameter hier entfernt wird.
Natürlich wird es viele Probleme mit dem aktuellen Sportgerüst geben, der in Zukunft nacheinander gelöst wird. Lassen Sie uns im nächsten Artikel diskutieren, wie Sie einheitliche Bewegung stoppen können.