En général, cela se fait à l'aide du survol de la souris OnMouseover et de l'élimination de la souris OnMouseout.
Le premier est la structure HTML
La copie de code est la suivante:
<body>
<div id = "div1">
<span> barre latérale </span>
</div>
</docy>
Ensuite, il y a le style de CSS:
La copie de code est la suivante:
# div1 {
Largeur: 150px;
hauteur: 200px;
Contexte: # 999999;
Pose: absolu;
à gauche: -150px;}
portée{
Largeur: 20px;
hauteur: 70px;
hauteur de ligne: 23px;
Contexte: # 09C;
Pose: absolu;
à droite: -20px;
en haut: 70px;}
La barre latérale de style par défaut est cachée comme indiqué sur la figure:
Lorsque la souris est déplacée, comme indiqué sur la figure:
Voici le code complet:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> UNT intitulé Document </Title>
<Style type = "text / css">
# div1 {
Largeur: 150px;
hauteur: 200px;
Contexte: # 999999;
Pose: absolu;
à gauche: -150px;}
portée{
Largeur: 20px;
hauteur: 70px;
hauteur de ligne: 23px;
Contexte: # 09C;
Pose: absolu;
à droite: -20px;
en haut: 70px;}
</ style>
<cript>
window.onload = function () {
var odiv = document.getElementById ('div1');
odiv.onmouseOver = function ()
{{
StartMove (0,10); // Le premier paramètre est la valeur cible de l'attribut de gauche DIV.
}
odiv.onmouseout = function ()
{{
StartMove (-150, -10);
}
}
var timer = null;
fonction startmove (cible, vitesse)
{{
var odiv = document.getElementById ('div1');
ClearInterval (temporisateur);
timer = setInterval (function () {
if (odiv.offsetleft == cible)
{{
ClearInterval (temporisateur);
}
autre
{{
odiv.style.left = odiv.offsetleft + speed + 'px';
}
}, 30)
}
</cript>
</ head>
<body>
<div id = "div1">
<span> barre latérale </span>
</div>
</docy>
</html>