具有弹性效果的右键导航菜单

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了自定义右键菜单效果。

并且右键菜单的展现具有弹性缓冲效果,代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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>

上面的代码实现了我们的要求,看起来代码比较长,其实代码非常的简单。

这里就不多介绍了,如果有任何问题可以跟帖留言,大家一起讨论学习。

回复

我来回复
  • 暂无回复内容