js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
更新時(shí)間：2014年01月20日 16:51:36 作者：
JQuery有很多這樣的插件，但本文的這個(gè)是跟著自己的想法寫的，也不知道他人是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下
JQuery有很多這樣的插件，但是我們公司不用jquery，沒有插件，所以我就試著自己寫，我也不知道別人是怎么寫的，純粹是按著自己的想法來(lái)的。
直接上代碼：
<!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è)試了。
這里要說(shuō)一下cancelBubble這兩個(gè)東西。因?yàn)槲易龅男Ч屈c(diǎn)擊按鈕就顯示div，點(diǎn)擊頁(yè)面的任意位置div就消失，但javascript的冒泡機(jī)制是button獲得一個(gè)onclick事件后，往上冒泡，dom在獲得一個(gè)onclick事件，這樣的話就和讓div消失的onclick事件沖突了，所以需要event.cancelBubble = true;這行代碼來(lái)停止冒泡。大體就是這樣，代碼很簡(jiǎn)單。
直接上代碼：
復(fù)制代碼 代碼如下:
<!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è)試了。
這里要說(shuō)一下cancelBubble這兩個(gè)東西。因?yàn)槲易龅男Ч屈c(diǎn)擊按鈕就顯示div，點(diǎn)擊頁(yè)面的任意位置div就消失，但javascript的冒泡機(jī)制是button獲得一個(gè)onclick事件后，往上冒泡，dom在獲得一個(gè)onclick事件，這樣的話就和讓div消失的onclick事件沖突了，所以需要event.cancelBubble = true;這行代碼來(lái)停止冒泡。大體就是這樣，代碼很簡(jiǎn)單。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果
- jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果
- JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jquery懸浮提示框完整實(shí)例
- jquery-tips懸浮提示插件分享
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩
相關(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語(yǔ)法的新思路，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
本文為大家介紹下如何改變隱藏的input中value的值，一句代碼就可以實(shí)現(xiàn)，感性的朋友可以參考下2013-12-12
解決WordPress使用CDN后博文無(wú)法評(píng)論的錯(cuò)誤
這篇文章主要介紹了解決WordPress使用CDN后博文無(wú)法評(píng)論的錯(cuò)誤的方法,同時(shí)提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以參考下2015-12-12
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js中的傳值方式,對(duì)于簡(jiǎn)單類型(好比字符串和數(shù)值)就是值傳遞和引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript傳參的6種方式,需要的朋友可以參考下2023-03-03
這篇文章主要簡(jiǎn)單介紹了Javascript數(shù)組與字典,需要的朋友可以參考下2015-01-01
用js實(shí)現(xiàn)鍵盤方向鍵翻頁(yè)功能的代碼
用js實(shí)現(xiàn)鍵盤方向鍵翻頁(yè)功能的代碼...2007-06-06
javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件
這篇文章主要介紹了javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06