具有弹性效果的右键导航菜单
分类:实例代码
本章节分享一段代码实例,它实现了自定义右键菜单效果。
并且右键菜单的展现具有弹性缓冲效果,代码实例如下:
<!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>
上面的代码实现了我们的要求,看起来代码比较长,其实代码非常的简单。
这里就不多介绍了,如果有任何问题可以跟帖留言,大家一起讨论学习。