快捷導(dǎo)航

javascript實(shí)現(xiàn)在網(wǎng)頁任意處點(diǎn)左鍵彈出隱藏菜單的方法

更新時間：2015年05月13日 10:01:00 投稿：shichen2014

這篇文章主要介紹了javascript實(shí)現(xiàn)在網(wǎng)頁任意處點(diǎn)左鍵彈出隱藏菜單的方法,設(shè)計(jì)鼠標(biāo)事件及css樣式操作的相關(guān)技巧,需要的朋友可以參考下

在網(wǎng)頁的任意處點(diǎn)擊左鍵就會彈出來，實(shí)際上是用JS控制DIV層的顯示，DIV層內(nèi)嵌套的是一個表格，表格里放菜單，這樣修改方便，不會CSS也沒關(guān)系，你可以把它復(fù)制下來，用DW打開重新修改一下菜單樣式，換成你自己喜歡的色彩

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隱藏菜單</title>
<style type="text/css">
body {
 font: 9pt;
}
.box {
 font: 9pt "宋體";
 position: absolute;
 background: skyblue;
}
</style>
</head>
<body>
<table cellpadding="5" id="itemopen" class="box" style="display:none">
 <tr>
  <td bgcolor="#0066cc">網(wǎng)站導(dǎo)航：</td>
 </tr>
<tr>
  <td><a href="/">AJAX實(shí)例</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">jQuery相關(guān)</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">ExtJS演示</a></td>
 </tr>
</table>
</center>
</div>
<script language="JavaScript">
document.onclick = popUp 
function popUp() {
newX = window.event.x + document.body.scrollLeft
newY = window.event.y + document.body.scrollTop
menu = document.all.itemopen
 if ( menu.style.display == ""){
  menu.style.display = "none" }
 else {
   menu.style.display = ""}
  menu.style.pixelLeft = newX - 50
  menu.style.pixelTop = newY - 50
}
</script>
<body>
<p align="center"><font size="3">點(diǎn)擊左鍵看看？</p>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS動畫實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解
這篇文章主要介紹了JS動畫實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解,需要的朋友可以參考下
2018-11-11
JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下
2015-08-08
JavaScript獲取并更改input標(biāo)簽name屬性的方法
這篇文章主要介紹了JavaScript獲取并更改input標(biāo)簽name屬性的方法,涉及javascript針對表單元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2015-07-07
js獲取div高度的代碼
不錯的獲取div高度的代碼，主要是方便測試一些信息，用到了javascript的offsetHeight屬性
2008-08-08
關(guān)于小程序優(yōu)化的一些建議(小結(jié))
這篇文章主要介紹了關(guān)于小程序優(yōu)化的一些建議(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對象的9種方式，幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?，感興趣的小伙伴們可以參考一下
2016-01-01
前端JS面試中常見的算法問題總結(jié)
雖然說在前端很少有機(jī)會接觸到算法，大多都交互性的操作，然而從各大公司面試來看，算法依舊是考察的一方面。下面這篇文章就給大家總結(jié)了在前端JS面試中常見的算法問題，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-12-12
js 作用域和變量詳解
本文主要介紹了js 的作用域和變量的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
JQuery 前臺切換網(wǎng)站的樣式實(shí)現(xiàn)
本文說的是在WordPress中怎樣利用JQuery在網(wǎng)站的前臺切換樣式的方法?；蛘哌@篇文章的方法大家可能不是太需要，因?yàn)槲矣X得這是解決我被主題樣式折騰到差不多分裂的原因及結(jié)果的最后手段。
2009-06-06
Unicode 編碼轉(zhuǎn)換器
Unicode 編碼轉(zhuǎn)換器...
2007-01-01