В общем, это делается с использованием мыши на падении и удалении мыши Onmouseout.
Во -первых, это структура HTML
Кода -копия выглядит следующим образом:
<тело>
<div id = "div1">
<pran> боковая панель </span>
</div>
</body>
Тогда есть стиль CSS:
Кода -копия выглядит следующим образом:
#div1 {
Ширина: 150px;
Высота: 200px;
Фон:#999999;
поза: абсолютно;
слева: -150px;}
охватывать{
Ширина: 20px;
Высота: 70px;
высота линии: 23px;
Фон:#09c;
поза: абсолютно;
Справа: -20px;
Верх: 70px;}
Боковая панель стиля по умолчанию скрыта, как показано на рисунке:
Когда мышь перемещается, как показано на рисунке:
Вот полный код:
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> unt назвал документ </title>
<Стиль типа = "text/css">
#div1 {
Ширина: 150px;
Высота: 200px;
Фон:#999999;
поза: абсолютно;
слева: -150px;}
охватывать{
Ширина: 20px;
Высота: 70px;
высота линии: 23px;
Фон:#09c;
поза: абсолютно;
Справа: -20px;
Верх: 70px;}
</style>
<Скрипт>
window.onload = function () {
var Odiv = document.getElementById ('div1');
Odiv.onmouseover = function ()
{{
Startmove (0,10); // Первый параметр является целевым значением левого атрибута DIV.
}
Odiv.onmouseout = function ()
{{
Startmove (-150, -10);
}
}
var timer = null;
Function Startmove (Target, Speed)
{{
var Odiv = document.getElementById ('div1');
ClearInterval (таймер);
timer = setInterval (function () {
if (Odiv.OffSetleft == Target)
{{
ClearInterval (таймер);
}
еще
{{
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT+SPEED+'PX';
}
}, 30)
}
</script>
</head>
<тело>
<div id = "div1">
<pran> боковая панель </span>
</div>
</body>
</html>