欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2014年01月20日 16:51:36   作者：  
JQuery有很多這樣的插件，但本文的這個(gè)是跟著自己的想法寫(xiě)的，也不知道他人是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下
JQuery有很多這樣的插件，但是我們公司不用jquery，沒(méi)有插件，所以我就試著自己寫(xiě)，我也不知道別人是怎么寫(xiě)的，純粹是按著自己的想法來(lái)的。

直接上代碼：
復(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)單。

相關(guān)文章

  • 一篇文章弄懂javascript中的執(zhí)行棧與執(zhí)行上下文

    一篇文章弄懂javascript中的執(zhí)行棧與執(zhí)行上下文

    這篇文章主要給大家介紹了關(guān)于javascript中執(zhí)行棧與執(zhí)行上下文的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • js實(shí)現(xiàn)適配不同的屏幕大小

    js實(shí)現(xiàn)適配不同的屏幕大小

    本文主要介紹了通過(guò)js適配不同的屏幕大小的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • js判斷上傳文件后綴名是否合法

    js判斷上傳文件后綴名是否合法

    這篇文章主要介紹了js判斷上傳文件后綴名是否合法的具體方法，以一個(gè)完整實(shí)例分析了javascript判斷上傳文件后綴名是否合法的方法，感興趣的小伙伴們可以參考一下
    2016-01-01
  • JS簡(jiǎn)單實(shí)現(xiàn)無(wú)縫滾動(dòng)效果實(shí)例

    JS簡(jiǎn)單實(shí)現(xiàn)無(wú)縫滾動(dòng)效果實(shí)例

    這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)無(wú)縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果的實(shí)現(xiàn)技巧,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作方法,需要的朋友可以參考下
    2016-08-08
  • JavaScript基礎(chǔ)知識(shí)及常用方法總結(jié)

    JavaScript基礎(chǔ)知識(shí)及常用方法總結(jié)

    JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分，所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架，學(xué)好JAVASCRIPT是最重要的，通過(guò)本篇文章給大家介紹javascript基礎(chǔ)知識(shí)及常用方法總結(jié)，對(duì)js基礎(chǔ)知識(shí)及常用方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法詳解

    JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法詳解

    這篇文章主要介紹了JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了JS正則匹配與截取操作的實(shí)現(xiàn)技巧,并拓展分析了數(shù)量詞的概念與功能,需要的朋友可以參考下
    2017-01-01
  • JS實(shí)現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作示例

    JS實(shí)現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作示例

    這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)數(shù)組元素刪除操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • 淺談JS中的三種字符串連接方式及其性能比較

    淺談JS中的三種字符串連接方式及其性能比較

    下面小編就為大家?guī)?lái)一篇淺談JS中的三種字符串連接方式及其性能比較。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-09
  • layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)

    layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)

    今天小編就為大家分享一篇layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法小結(jié)

    javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法小結(jié)

    這篇文章主要介紹了javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法,總結(jié)分析了JavaScript重復(fù)輸出給定字符串的4種常見(jiàn)操作技巧,需要的朋友可以參考下
    2020-02-02

最新評(píng)論