JavaScript滑鼠懸浮展開側欄導航

antzone發表於2018-07-30
JavaScript

本章節分享一段程式碼例項，它實現了滑鼠懸浮能夠展開側欄導航的效果。

程式碼來源於論壇會員的一個問題，本站將其優化並改進了一下，原來的程式碼是有點問題的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="author" content="http://www.softwhy.com/" />
 <title>螞蟻部落</title>
 <style type="text/css">
body, ul{
  margin:0;
  padding:0;
}
#box{
  width:150px;
  height:200px;
  background:#0CF;
  position:absolute;
  left:-150px;
}
ul li{
  list-style-type:none;
}
ul li a{
  display:block;
  height:28px;
  text-decoration:none;
}
#span {
  width:20px;
  height:80px;
  position:absolute;
  top:70px;
  background:#ffc;
  right:-20px;
}
</style>
<script type="text/javascript">
var timer;
function startMove(){ 
  clearInterval(timer);
  var odiv=document.getElementById("box");
  timer=setInterval(function(){
    if(odiv.offsetLeft>=0){
      clearInterval(timer);
    }
    else{ 
      odiv.style.left=odiv.offsetLeft+3+"px";
    }
  },30);
}
function obMove(){ 
  clearInterval(timer);
  var odiv=document.getElementById("box");
  timer=setInterval(function(){
    if(odiv.offsetLeft<=-150){
      clearInterval(timer);
    }
    else{ 
      odiv.style.left=odiv.offsetLeft-3+"px";
    }
  },30); 
} 
window.onload=function(){  
  document.getElementById("box").onmouseover=startMove;
  document.getElementById("box").onmouseout=obMove;
}
 </script>
 </head>
 <body>
 <div id="box"> 
   <span id="span">分享到</span>
   <ul>
     <li><a href="#">softwhy.com</a></li>
     <li><a href="#">Sina微博</a></li>
     <li><a href="#">朋友圈</a></li>
     <li><a href="#">螞蟻部落</a></li>
     <li><a href="#">QQ空間</a></li>
   </ul>
 </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var timer,宣告一個變數用來儲存定時器函式的標識。

（2）.function startMove(){ },作為onmouseover事件處理函式。

（3）.clearInterval(timer)，停止上一個定時器方法的執行，如果沒有此程式碼，側可能出現多個定時器方法共同執行的現象。

（4）.var odiv=document.getElementById("box")，獲取id屬性值為box的元素物件。

（5）.timer=setInterval(function(){

  if(odiv.offsetLeft>=0){

    clearInterval(timer);

  }

  else{

    odiv.style.left=odiv.offsetLeft+3+"px";

  }

},30)，每隔30毫秒執行一次函式，當然需要判斷offsetLeft屬性值，關於此屬性可以參閱相關閱讀。

二.相關閱讀:

（1）.setInterval方法可以參閱JavaScript setInterval()一章節。

（2）.offsetLeft屬性參閱JavaScript offsetLeft一章節。

（3）.onmouseover事件參閱JavaScript mouseover 事件一章節。

（4）.onmouseout事件參閱JavaScript mouseout 事件一章節。

相關文章