자바스크립트의 동적 사이드바 구현 예에 대한 자세한 설명-JS 튜토리얼-php.cn

자바스크립트의 동적 사이드바 구현 예에 대한 자세한 설명

高洛峰

풀어 주다： 2016-12-07 10:20:28

원래의

1655명이 탐색했습니다.

Javascript는 동적 사이드바를 구현합니다

일반적으로 마우스 오버 시 마우스 오버와 마우스 아웃 시 마우스 제거를 두 번 사용하면 완성됩니다.

먼저 HTML 구조

<body>
<div id="div1">
<span>侧边栏</span>
</div>
</body>

로그인 후 복사

그 다음 CSS 스타일:

#div1{
  width:150px;
  height:200px;
  background:#999999;
  position:absolute;
  left:-150px;}
span{
  width:20px;
  height:70px;
  line-height:23px;
  background:#09C;
  position:absolute;
  right:-20px;
  top:70px;}

로그인 후 복사

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

자바스크립트의 동적 사이드바 구현 예에 대한 자세한 설명

그림과 같이 해당 사이드바에 마우스를 이동하면

자바스크립트의 동적 사이드바 구현 예에 대한 자세한 설명

다음은 전체 코드입니다.





无标题文档

<script>
window.onload=function(){
  var odiv=document.getElementById(&#39;div1&#39;);
  odiv.onmouseover=function ()
  {
     
    startmove(0,10);//第一个参数为div  left属性的目标值  第二个为 每次移动多少像素
     
    }
 odiv.onmouseout=function ()
 {
   startmove(-150,-10);
   }
  }
   
  var timer=null;
function startmove(target,speed)
{
    
  var odiv=document.getElementById(&#39;div1&#39;);
clearInterval(timer);
   timer=setInterval(function (){
     
    if(odiv.offsetLeft==target)
    {
      clearInterval(timer);
      }
      else
      { 
    odiv.style.left=odiv.offsetLeft+speed+&#39;px&#39;;
      }
     
    },30)
   
  }
   
</script>

 
<body>
<div id="div1">
<span>侧边栏</span>
</div>
</body>

로그인 후 복사