집 > 기사 > 웹 프론트엔드 > 자바스크립트의 동적 사이드바 구현 예에 대한 자세한 설명

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

高洛峰원래의: 2016-12-07 10:20:281710검색

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>

성명：

이전 기사：NodeJS에서 MongoDB를 빠르게 시작하기 위한 자세한 튜토리얼다음 기사：NodeJS에서 MongoDB를 빠르게 시작하기 위한 자세한 튜토리얼

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

관련 기사