Heim > Artikel > Web-Frontend > Detaillierte Erläuterung von Beispielen für die Implementierung einer dynamischen Seitenleiste in Javascript

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

高洛峰Original: 2016-12-07 10:20:281655Durchsuche

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>

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

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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Tutorial für den schnellen Einstieg mit MongoDB in NodeJSNächster Artikel：Detailliertes Tutorial für den schnellen Einstieg mit MongoDB in NodeJS

In Verbindung stehende Artikel

Mehr sehen