Em geral, isso é feito usando o mouse pairar o onmouseover e a remoção do mouse onMouseOut.
Primeiro é a estrutura HTML
A cópia do código é a seguinte:
<Body>
<div id = "div1">
<Span> Barra lateral </span>
</div>
</body>
Depois, há o estilo de CSS:
A cópia do código é a seguinte:
#div1 {
Largura: 150px;
Altura: 200px;
Antecedentes:#999999;
pose: absoluto;
Esquerda: -150px;}
span {
Largura: 20px;
Altura: 70px;
altura de linha: 23px;
Antecedentes:#09c;
pose: absoluto;
Direita: -20px;
topo: 70px;}
A barra lateral do estilo padrão está oculta, como mostrado na figura:
Quando o mouse é movido, como mostrado na figura:
Aqui está o código completo:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> unt intitulado Documento </title>
<Style type = "text/css">
#div1 {
Largura: 150px;
Altura: 200px;
Antecedentes:#999999;
pose: absoluto;
Esquerda: -150px;}
span {
Largura: 20px;
Altura: 70px;
altura de linha: 23px;
Antecedentes:#09c;
pose: absoluto;
Direita: -20px;
topo: 70px;}
</style>
<Cript>
window.onload = function () {
var odiv = document.getElementById ('div1');
odiv.onMouseOver = function ()
{{
StartMove (0,10); // O primeiro parâmetro é o valor de destino do atributo DIV esquerda.
}
odiv.onMouseOut = function ()
{{
startMove (-150, -10);
}
}
Var Timer = NULL;
função startmove (alvo, velocidade)
{{
var odiv = document.getElementById ('div1');
ClearInterval (timer);
Timer = setInterval (function () {
if (odiv.OffSetLeft == Target)
{{
ClearInterval (timer);
}
outro
{{
odiv.style.left = odiv.offsetleft+velocidade+'px';
}
}, 30)
}
</script>
</head>
<Body>
<div id = "div1">
<Span> Barra lateral </span>
</div>
</body>
</html>