In diesem Artikel wird die Implementierungsmethode beschrieben, um die Seitenleisteanimation von JS Motion Framework zu teilen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> </title>
<style type = "text/css">
*{{
Rand: 0px;
Polsterung: 0px;
}
#div1 {
Breite: 319px;
Höhe: 340px;
Grenze: 1PX Solid #fff;
Position: absolut;
Oben: 100px;
links: -320px;
Hintergrundbild: URL (Bilder/1.png);
Hintergrundrepeat: No-Repeat;
}
#div1 span {
Breite: 30px;
Höhe: 130px;
Grenze: 1px fest blau;
Position: absolut;
Rechts: -23px;
Top: 95px;
Hintergrund: Rot;
Schriftfamilie: "Microsoft Yahei";
Farbe: #ffffff;
Text-Align: Mitte;
Zeilenhöhe: 40px;
Border-Radius: 0px 200px 200px 0px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var ospan = odiv.getElementsByTagName ('span') [0];
var time = null;
var Geschwindigkeit = 8;
odiv.onmouseover = function () {// mit der Maus mit der Maus zum Ereignis der gesamten Div hinzufügen
ClearInterval (Zeit);
time = setInterval (function () {
if (odiv.offsetleft> = 0) {ClearInterval (Zeit);}
anders{
odiv.style.left = odiv.offsetleft+speed+'px';
}
}, 1);
}
odiv.onmouseout = function () {// zum gesamten Div hinzufügen, um das Ereignis zu entfernen
ClearInterval (Zeit);
time = setInterval (function () {
if (odiv.offsetleft <=-320) {ClearInterval (Zeit);}
anders{
odiv.style.left = odiv.offsetleft-Speed+'px';
}
}, 1);
}
}
</script>
</head>
<body>
<div id = "div1">
<Pan> Teilen Sie </span>
</div>
</body>
</html>
Optimierter Code:
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> </title>
<style type = "text/css">
*{{
Rand: 0px;
Polsterung: 0px;
}
#div1 {
Breite: 319px;
Höhe: 340px;
Grenze: 1PX Solid #fff;
Position: absolut;
Oben: 100px;
links: -320px;
Hintergrundbild: URL (Bilder/1.png);
Hintergrundrepeat: No-Repeat;
}
#div1 span {
Breite: 30px;
Höhe: 130px;
Grenze: 1px fest blau;
Position: absolut;
Rechts: -23px;
Top: 95px;
Hintergrund: Rot;
Schriftfamilie: "Microsoft Yahei";
Farbe: #ffffff;
Text-Align: Mitte;
Zeilenhöhe: 40px;
Border-Radius: 0px 200px 200px 0px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var ospan = odiv.getElementsByTagName ('span') [0];
var time = null;
var spe = 8;
var speed = null;
Funktionsbewegung (Bord) {
ClearInterval (Zeit);
time = setInterval (function () {
if (odiv.offsetleft> bord) {speed = -spe;}
sonst {speed = spe;}
if (odiv.offsetLeft == Bord) {ClearInterval (Zeit);}
anders{
odiv.style.left = odiv.offsetleft+speed+'px';
}
}, 1);
}
odiv.onmouseover = function () {// mit der Maus mit der Maus zum Ereignis der gesamten Div hinzufügen
bewegen (0);
}
odiv.onmouseout = function () {// zum gesamten Div hinzufügen, um das Ereignis zu entfernen
Move (-320);
}
}
</script>
</head>
<body>
<div id = "div1">
<Pan> Teilen Sie </span>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.