Este artículo describe el método de implementación para compartir la animación de la barra lateral del marco de movimiento JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<meta charset = "utf-8">
<title> </title>
<style type = "text/css">
*{
margen: 0px;
relleno: 0px;
}
#Div1 {
Ancho: 319px;
Altura: 340px;
borde: 1px sólido #fff;
Posición: Absoluto;
arriba: 100px;
Izquierda: -320px;
IMAGEN DE BUENGE: URL (imágenes/1.png);
Background-Repeat: sin repetición;
}
#Div1 Span {
Ancho: 30px;
Altura: 130px;
borde: 1px azul sólido;
Posición: Absoluto;
Derecha: -23px;
Arriba: 95px;
Antecedentes: rojo;
Font-Family: "Microsoft Yahei";
Color: #ffffff;
Text-Align: Center;
Línea de altura: 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;
velocidad var = 8;
odiv.onmouseover = function () {// Agregar a todo el DIV con mouse en evento
ClearInterval (tiempo);
Time = setInterval (function () {
if (odiv.offsetleft> = 0) {ClearInterval (Time);}
demás{
odiv.style.left = odiv.offsetleft+velocidad+'px';
}
}, 1);
}
odiv.onmouseout = function () {// Agregar a todo el DIV para eliminar el evento
ClearInterval (tiempo);
Time = setInterval (function () {
if (odiv.offsetleft <=-320) {ClearInterval (Time);}
demás{
odiv.style.left = odiv.offsetleft-speed+'px';
}
}, 1);
}
}
</script>
</ablo>
<Body>
<div id = "div1">
<span> compartir a </span>
</div>
</body>
</html>
Código optimizado:
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<meta charset = "utf-8">
<title> </title>
<style type = "text/css">
*{
margen: 0px;
relleno: 0px;
}
#Div1 {
Ancho: 319px;
Altura: 340px;
borde: 1px sólido #fff;
Posición: Absoluto;
arriba: 100px;
Izquierda: -320px;
IMAGEN DE BUENGE: URL (imágenes/1.png);
Background-Repeat: sin repetición;
}
#Div1 Span {
Ancho: 30px;
Altura: 130px;
borde: 1px azul sólido;
Posición: Absoluto;
Derecha: -23px;
Arriba: 95px;
Antecedentes: rojo;
Font-Family: "Microsoft Yahei";
Color: #ffffff;
Text-Align: Center;
Línea de altura: 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 VELA = NULL;
Función Move (Bord) {
ClearInterval (tiempo);
Time = setInterval (function () {
if (odiv.offsetleft> bord) {speed = -spe;}
else {speed = spe;}
if (odiv.offsetleft == bord) {ClearInterval (Time);}
demás{
odiv.style.left = odiv.offsetleft+velocidad+'px';
}
}, 1);
}
odiv.onmouseover = function () {// Agregar a todo el DIV con mouse en evento
mover (0);
}
odiv.onmouseout = function () {// Agregar a todo el DIV para eliminar el evento
mover (-320);
}
}
</script>
</ablo>
<Body>
<div id = "div1">
<span> compartir a </span>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.