具有彈性效果的右鍵導航選單

admin發表於2017-04-09

本章節分享一段程式碼例項，它實現了自定義右鍵選單效果。

並且右鍵選單的展現具有彈性緩衝效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div,body,span,ul,li {
  padding:0;
  margin:0;
  font-size:12px;
}
ul,ol {list-style-type:none;}
#div1 {
  width:196px;
  height:296px;
  padding:2px;
  overflow:hidden;
  position:absolute;
  border:1px solid #666;
  left:200px;
  top:50px;
  display:none;
  z-index=1;
  -webkit-box-shadow:1px 3px 4px #888;
  box-shadow:1px 3px 4px #888;
  -moz-box-shadow:1px 3px 4px #888;
}
#ul li {
  width:176px;
  height:25px;
  line-height:25px;
  cursor:pointer;
  overflow:hidden;
  padding-left:20px;
}
.tip {
  width:500px;
  height:25px;
  font-size:20px;
  margin:50px 200px;
  color:red;
}
</style>
<script type="text/javascript">
  var g_oDiv = {};
  var oDiv = null;
  var g_iSpeed = 0;
  var t = null;
  window.onload = function () {
    opUl();
    oDiv = document.getElementById("div1");
    oDiv.style.height = "0px";
    document.oncontextmenu = function (ev) {
      var oEvent = window.event || ev;
      cancelDefault(oEvent);
      g_oDiv.MouseX = oEvent.clientX;
      g_oDiv.MouseY = oEvent.clientY;
      oDiv.style.left = g_oDiv.MouseX + "px";
      oDiv.style.top = g_oDiv.MouseY + "px";
      /* 初始化經過背景為空 */
      var oUl = document.getElementById("ul");
      var aLi = oUl.getElementsByTagName("li");
      for (var index = 0; index < aLi.length; index++) {
        aLi[index].style.background = "none";
      }
      clearInterval(t);
      doDiv();
    }
    document.body.onmousedown = function (ev) {
      var oEvent = window.event || ev;
      clearInterval(t);
      g_iSpeed = 0;
      g_oDiv.h = 0;
      oDiv.style.height = g_oDiv.h + "px";
      oDiv.style.display = "none";
    }
    oDiv.onmousedown = function (ev) {
      var oEvent = window.event || ev;
      oEvent.cancelBubble = true;
    }
  }
  function doDiv(ev) {
    var oEvent = window.event || ev;
    oDiv.style.display = "block";
    t = setInterval(doMove, 30);
  }
  function doMove() {
    if (oDiv.offsetHeight >= 302) {
      g_iSpeed *= -0.7;
      oDiv.style.height = 302 + "px";
    }
    g_oDiv.h = g_iSpeed + oDiv.offsetHeight;
    g_iSpeed += 10;
    oDiv.style.height = g_oDiv.h + "px";
  }
  function cancelDefault(oEvent) {
    if (oEvent.preventDefault) {
      oEvent.preventDefault();
    }
    else {
      oEvent.returnValue = false;
    }
  }
  /* 對li操作後的動作的定義 */
  function opUl() {
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    for (var index = 0; index < aLi.length; index++) {
      aLi[index].aIndex = index;
      aLi[index].onmouseover = function () {
        for (j = 0; j < aLi.length; j++) {
          aLi[j].style.background = "none";
        }
        aLi[this.aIndex].style.background = "#ffbb66";
      }
      aLi[index].onclick = function () {
        clearInterval(t);
        oDiv.style.display = "none";
        alert(this.innerHTML + " 你可以在這裡自定義自己的方法啦");
      }
    }
  }
</script>
</head>
<body style="width:2000px;height:800px;">
<div class="tip">右鍵點選遊覽器</div>
 <div id="div1">
  <ul id="ul">
   <li>螞蟻部落一</li>
   <li>螞蟻部落二</li>
   <li>螞蟻部落三</li>
   <li>螞蟻部落四</li>
   <li>螞蟻部落五</li>
   <li>螞蟻部落六</li>
   <li>螞蟻部落七</li>
   <li>螞蟻部落八</li>
  </ul>
 </div>
</body>
</html>

上面的程式碼實現了我們的要求，看起來程式碼比較長，其實程式碼非常的簡單。

這裡就不多介紹了，如果有任何問題可以跟帖留言，大家一起討論學習。

相關文章