萬盛學電腦網 >> 腳本專題 >> javascript >> js點擊出現懸浮窗效果不使用JQuery插件
js點擊出現懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件，但本文的這個是跟著自己的想法寫的，也不知道他人是如何實現的，感興趣的朋友可以了解下
JQuery有很多這樣的插件，但是我們公司不用jquery，沒有插件，所以我就試著自己寫，我也不知道別人是怎麼寫的，純粹是按著自己的想法來的。 直接上代碼： 代碼如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementsByTagName('button')[0]; var flt = document.getElementsByTagName('div')[0]; btn.onclick = function(){ event.cancelBubble = true; var x = btn.offsetLeft - 15 + 'px'; var y = btn.offsetTop - 100 + 'px'; flt.style.top = y; flt.style.left = x; flt.style.display = 'block'; } document.onclick = function(){ flt.style.display = 'none'; } } </script> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ width: 60px; height: 100px; background: #33ccff; display: none; position: absolute; } div ul{ text-align: center; } div li{ list-style-type: none; } button{ top: 300px; left: 400px; position: absolute; } </style> </head> <body> <button id="btn">Click</button> <div> <ul id="nav"> <li class="item1"><a href="">Demo 1</a></li> <li class="item2"><a href="">Demo 2</a></li> <li class="item3"><a href="">Demo 3</a></li> <li class="item4"><a href="">Demo 4</a></li> <li class="item5"><a href="">Demo 5</a></li> </ul> </div> </body> </html> 復制到本地就可以測試了。 這裡要說一下cancelBubble這兩個東西。因為我做的效果是點擊按鈕就顯示div，點擊頁面的任意位置div就消失，但javascript的冒泡機制是button獲得一個onclick事件後，往上冒泡，dom在獲得一個onclick事件，這樣的話就和讓div消失的onclick事件沖突了，所以需要event.cancelBubble = true;這行代碼來停止冒泡。大體就是這樣，代碼很簡單。javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved