js點擊出現(xiàn)懸浮窗效果不使用JQuery插件
更新時間：2014年01月20日 16:51:36 作者：
JQuery有很多這樣的插件，但本文的這個是跟著自己的想法寫的，也不知道他人是如何實現(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ù)制到本地就可以測試了。
這里要說一下cancelBubble這兩個東西。因為我做的效果是點擊按鈕就顯示div，點擊頁面的任意位置div就消失，但javascript的冒泡機(jī)制是button獲得一個onclick事件后，往上冒泡，dom在獲得一個onclick事件，這樣的話就和讓div消失的onclick事件沖突了，所以需要event.cancelBubble = true;這行代碼來停止冒泡。大體就是這樣，代碼很簡單。
直接上代碼：
復(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ù)制到本地就可以測試了。
這里要說一下cancelBubble這兩個東西。因為我做的效果是點擊按鈕就顯示div，點擊頁面的任意位置div就消失，但javascript的冒泡機(jī)制是button獲得一個onclick事件后，往上冒泡，dom在獲得一個onclick事件，這樣的話就和讓div消失的onclick事件沖突了，所以需要event.cancelBubble = true;這行代碼來停止冒泡。大體就是這樣，代碼很簡單。
您可能感興趣的文章:
- jQuery實現(xiàn)鼠標(biāo)拖拽登錄框移動效果
- jQuery實現(xiàn)百度登錄框的動態(tài)切換效果
- JQuery Mobile 彈出式登錄框的實現(xiàn)方法
- jquery中dom操作和事件的實例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jquery實現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jquery懸浮提示框完整實例
- jquery-tips懸浮提示插件分享
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- jquery+CSS實現(xiàn)懸浮登錄框遮罩
相關(guān)文章
一篇文章弄懂javascript中的執(zhí)行棧與執(zhí)行上下文
這篇文章主要給大家介紹了關(guān)于javascript中執(zhí)行棧與執(zhí)行上下文的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文主要介紹了通過js適配不同的屏幕大小的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了js判斷上傳文件后綴名是否合法的具體方法，以一個完整實例分析了javascript判斷上傳文件后綴名是否合法的方法，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JS簡單實現(xiàn)無縫滾動效果,結(jié)合完整實例形式分析了javascript實現(xiàn)圖片無縫滾動效果的實現(xiàn)技巧,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)動態(tài)修改頁面元素屬性的相關(guān)操作方法,需要的朋友可以參考下2016-08-08
JavaScript基礎(chǔ)知識及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分，所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架，學(xué)好JAVASCRIPT是最重要的，通過本篇文章給大家介紹javascript基礎(chǔ)知識及常用方法總結(jié)，對js基礎(chǔ)知識及常用方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JS使用正則截取兩個字符串之間的字符串實現(xiàn)方法詳解
這篇文章主要介紹了JS使用正則截取兩個字符串之間的字符串實現(xiàn)方法,結(jié)合實例形式簡單分析了JS正則匹配與截取操作的實現(xiàn)技巧,并拓展分析了數(shù)量詞的概念與功能,需要的朋友可以參考下2017-01-01
JS實現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作示例
這篇文章主要介紹了JS實現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作,結(jié)合實例形式總結(jié)分析了JavaScript針對數(shù)組元素刪除操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
下面小編就為大家?guī)硪黄獪\談JS中的三種字符串連接方式及其性能比較。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
layui+SSM的數(shù)據(jù)表的增刪改實例(利用彈框添加、修改)
今天小編就為大家分享一篇layui+SSM的數(shù)據(jù)表的增刪改實例(利用彈框添加、修改)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javaScript 實現(xiàn)重復(fù)輸出給定的字符串的常用方法小結(jié)
這篇文章主要介紹了javaScript 實現(xiàn)重復(fù)輸出給定的字符串的常用方法,總結(jié)分析了JavaScript重復(fù)輸出給定字符串的4種常見操作技巧,需要的朋友可以參考下2020-02-02