Im Allgemeinen erfolgt es mit der Maus -Hover -Onmouseover- und Mausentfernung onmouseout.
Erstens ist die HTML -Struktur
Die Codekopie lautet wie folgt:
<body>
<div id = "div1">
<Pan> Seitenleiste </span>
</div>
</body>
Dann gibt es den Stil von CSS:
Die Codekopie lautet wie folgt:
#div1 {
Breite: 150px;
Höhe: 200px;
Hintergrund:#999999;
Position: absolut;
links: -150px;}
Spanne{
Breite: 20px;
Höhe: 70px;
Zeilenhöhe: 23px;
Hintergrund:#09c;
Position: absolut;
Rechts: -20px;
Top: 70px;}
Die Seitenleiste im Standardstil ist versteckt, wie in der Abbildung gezeigt:
Wenn die Maus einbewegt ist, wie in der Abbildung gezeigt:
Hier ist der vollständige Code:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> bis zum Titel "Dokument" </title>
<style type = "text/css">
#div1 {
Breite: 150px;
Höhe: 200px;
Hintergrund:#999999;
Position: absolut;
links: -150px;}
Spanne{
Breite: 20px;
Höhe: 70px;
Zeilenhöhe: 23px;
Hintergrund:#09c;
Position: absolut;
Rechts: -20px;
Top: 70px;}
</style>
<Script>
window.onload = function () {
var odiv = document.getElementById ('div1');
odiv.onmouseover = function ()
{
StartMove (0,10); // Der erste Parameter ist der Zielwert des DIV -linken Attributs.
}
odiv.onmouseout = function ())
{
startMove (-150, -10);
}
}
var timer = null;
Funktion startMove (Ziel, Geschwindigkeit)
{
var odiv = document.getElementById ('div1');
ClearInterval (Timer);
timer = setInterval (function () {
if (odiv.offsetleft == Ziel)
{
ClearInterval (Timer);
}
anders
{
odiv.style.left = odiv.offsetleft+speed+'px';
}
}, 30)
}
</script>
</head>
<body>
<div id = "div1">
<Pan> Seitenleiste </span>
</div>
</body>
</html>