일반적으로 마우스 호버 onmouseover 및 마우스 onmouseout을 사용하여 수행됩니다.
첫 번째는 HTML 구조입니다
코드 사본은 다음과 같습니다.
<body>
<div id = "div1">
<span> 사이드 바 </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> 제목의 문서 </title>
<스타일 유형 = "텍스트/CSS">
#div1 {
너비 : 150px;
높이 : 200px;
배경 :#999999;
위치 : 절대;
왼쪽 : -150px;}
기간{
너비 : 20px;
높이 : 70px;
라인 높이 : 23px;
배경 :#09C;
위치 : 절대;
오른쪽 : -20px;
상단 : 70px;}
</스타일>
<cript>
Window.onload = function () {
var odiv = document.getElementById ( 'div1');
odiv.onmouseover = function ()
{
STARTMOVE (0,10); // 첫 번째 매개 변수는 DIV 왼쪽 속성의 목표 값입니다.
}
odiv.onmouseout = function ()
{
StartMove (-150, -10);
}
}
var timer = null;
함수 startMove (대상, 속도)
{
var odiv = document.getElementById ( 'div1');
ClearInterval (타이머);
타이머 = setInterval (function () {
if (odiv.offsetleft == target)
{
ClearInterval (타이머);
}
또 다른
{
odiv.style.left = odiv.offsetleft+속도+'px';
}
}, 30)
}
</스크립트>
</head>
<body>
<div id = "div1">
<span> 사이드 바 </span>
</div>
</body>
</html>