Javascript는 동적 사이드바 code_javascript 기술을 구현합니다.

일반적으로 마우스오버 시 마우스 호버, 마우스아웃 시 마우스 제거를 2회 사용하면 완료됩니다.

먼저 HTML 구조입니다

코드 복사 코드는 다음과 같습니다.

< div id= "div1">
사이드바

그런 다음 CSS 스타일:

코드 복사 코드는 다음과 같습니다.

#div1{
너비:150px ;
높이:200px;
배경:#999999;
위치:절대;
왼쪽:-150px;}
범위{
너비:20px;
높이:70px ;
줄 높이:23px;
배경:#09C;
위치:절대;
오른쪽:-20px;
상단:70px;}

그림과 같이 기본 스타일 사이드바가 숨겨져 있습니다.

마우스를 안으로 넣으면 다음과 같습니다.

전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;script>
window.onload=function(){
var odiv=document.getElementById('div1');
odiv.onmouseover=function()
{

startmove (0,10);//첫 번째 매개변수는 div의 왼쪽 속성의 대상 값입니다. 두 번째 매개변수는 매번 이동할 픽셀 수입니다.

}
odiv.onmouseout= function ()
{
startmove(-150,-10);
}
}

var 타이머=null;
function startmove(target,speed)
{

var odiv=document.getElementById('div1');
clearInterval(timer);
타이머=setInterval(function (){

if(odiv.offsetLeft ==target)
{
clearInterval(timer);
}
else
odiv.style.left=odiv.offsetLeft 속도 'px';
            }

                                                           )

}

사이드바