En general, se realiza el uso del mouse en mouseo y la extracción del mouse en mouseut.
Primero está la estructura HTML
La copia del código es la siguiente:
<Body>
<div id = "div1">
<span> barra lateral </span>
</div>
</body>
Luego está el estilo de CSS:
La copia del código es la siguiente:
#Div1 {
Ancho: 150px;
Altura: 200px;
Antecedentes:#999999;
Pose: Absoluto;
Izquierda: -150px;}
durar{
Ancho: 20px;
Altura: 70px;
Línea de altura: 23px;
Antecedentes:#09C;
Pose: Absoluto;
Derecha: -20px;
Arriba: 70px;}
La barra lateral de estilo predeterminada está oculta como se muestra en la figura:
Cuando se mueve el mouse, como se muestra en la figura:
Aquí está el código completo:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> un documento titulado </title>
<Style type = "text/css">
#Div1 {
Ancho: 150px;
Altura: 200px;
Antecedentes:#999999;
Pose: Absoluto;
Izquierda: -150px;}
durar{
Ancho: 20px;
Altura: 70px;
Línea de altura: 23px;
Antecedentes:#09C;
Pose: Absoluto;
Derecha: -20px;
Arriba: 70px;}
</style>
<script>
window.onload = function () {
var odiv = document.getElementById ('div1');
odiv.onmouseover = function ()
{{
StartMove (0,10); // El primer parámetro es el valor objetivo del atributo de Izquierda DIV.
}
odiv.onmouseout = function ()
{{
startmove (-150, -10);
}
}
VAR TIMER = NULL;
función startmove (objetivo, velocidad)
{{
var odiv = document.getElementById ('div1');
ClearInterval (temporizador);
timer = setInterval (function () {
if (odiv.offsetleft == objetivo)
{{
ClearInterval (temporizador);
}
demás
{{
odiv.style.left = odiv.offsetleft+velocidad+'px';
}
}, 30)
}
</script>
</ablo>
<Body>
<div id = "div1">
<span> barra lateral </span>
</div>
</body>
</html>