Heim > Web-Frontend > js-Tutorial > 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

WBOY
Freigeben: 2016-05-16 15:59:32
Original
1235 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage