Heim > Artikel > Web-Frontend > JavaScript-Methode zum Implementieren eines versteckten Menü-Popups durch Linksklick auf eine beliebige Stelle auf einer Webseite_Javascript-Kenntnisse

JavaScript-Methode zum Implementieren eines versteckten Menü-Popups durch Linksklick auf eine beliebige Stelle auf einer Webseite_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:59:321192Durchsuche

Klicken Sie mit der linken Maustaste auf eine beliebige Stelle auf der Webseite und ein Popup wird angezeigt. Tatsächlich wird JS verwendet, um die Anzeige der DIV-Ebene zu steuern. In der DIV-Ebene ist eine Tabelle verschachtelt und ein Menü ist vorhanden in der Tabelle. Auf diese Weise ist es einfach zu ändern und erfordert kein CSS. Es spielt keine Rolle, Sie können es kopieren, mit DW öffnen und den Menüstil in Ihre Lieblingsfarbe ändern

<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">网站导航：</td>
 </tr>
<tr>
  <td><a href="/">AJAX实例</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">jQuery相关</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">点击左键看看？</p>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert den Auf- und Ab-Bildlaufeffekt mit Buttons_Javascript-FähigkeitenNächster Artikel：js implementiert den Auf- und Ab-Bildlaufeffekt mit Buttons_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen