js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件

更新時(shí)間：2014年01月20日 16:51:36 作者：

JQuery有很多這樣的插件，但本文的這個(gè)是跟著自己的想法寫的，也不知道他人是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下

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> 

復(fù)制到本地就可以測(cè)試了。

這里要說一下cancelBubble這兩個(gè)東西。因?yàn)槲易龅男Ч屈c(diǎn)擊按鈕就顯示div，點(diǎn)擊頁面的任意位置div就消失，但javascript的冒泡機(jī)制是button獲得一個(gè)onclick事件后，往上冒泡，dom在獲得一個(gè)onclick事件，這樣的話就和讓div消失的onclick事件沖突了，所以需要event.cancelBubble = true;這行代碼來停止冒泡。大體就是這樣，代碼很簡單。

您可能感興趣的文章:

相關(guān)文章

如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設(shè)置Textarea以及把文本放到標(biāo)記里都不會(huì)起作用，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以了解下
2014-01-01
JavaScript實(shí)現(xiàn)Tab點(diǎn)擊切換
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab點(diǎn)擊切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
淺談一種讓小程序支持JSX語法的新思路
這篇文章主要介紹了淺談一種讓小程序支持JSX語法的新思路，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
改變隱藏的input中value的值代碼
本文為大家介紹下如何改變隱藏的input中value的值，一句代碼就可以實(shí)現(xiàn)，感性的朋友可以參考下
2013-12-12
解決WordPress使用CDN后博文無法評(píng)論的錯(cuò)誤
這篇文章主要介紹了解決WordPress使用CDN后博文無法評(píng)論的錯(cuò)誤的方法,同時(shí)提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以參考下
2015-12-12
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JavaScript傳參的6種方式總結(jié)
js中的傳值方式,對(duì)于簡單類型(好比字符串和數(shù)值)就是值傳遞和引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript傳參的6種方式,需要的朋友可以參考下
2023-03-03
淺談Javascript 數(shù)組與字典
這篇文章主要簡單介紹了Javascript數(shù)組與字典,需要的朋友可以參考下
2015-01-01
用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼
用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼...
2007-06-06
javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件
這篇文章主要介紹了javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-06-06