Detaillierte Erläuterung von Beispielen für die Implementierung einer dynamischen Seitenleiste in Javascript-js-Tutorial-php.cn

Detaillierte Erläuterung von Beispielen für die Implementierung einer dynamischen Seitenleiste in Javascript

高洛峰

Freigeben： 2016-12-07 10:20:28

Original

1653 Leute haben es durchsucht

Javascript implementiert eine dynamische Seitenleiste

Im Allgemeinen wird dies durch die zweimalige Verwendung des Mauszeigers bei Mouseover und der Mausentfernung bei Mouseout vervollständigt.

Zuerst die HTML-Struktur

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

Nach dem Login kopieren

Dann der CSS-Stil:

#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;}

Nach dem Login kopieren

Die Seitenleiste im Standardstil wird ausgeblendet, wie in der Abbildung gezeigt:

Detaillierte Erläuterung von Beispielen für die Implementierung einer dynamischen Seitenleiste in Javascript

Wenn die Maus hinein bewegt wird, wie in der Abbildung gezeigt:

Detaillierte Erläuterung von Beispielen für die Implementierung einer dynamischen Seitenleiste in Javascript

Das Folgende ist der vollständige Code:





无标题文档

<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>

Nach dem Login kopieren