js点击出现悬浮窗效果不采用JQuery插件

发布时间：2023-09-22 15:28:39 所属栏目：教程来源：

导读：JQuery有很多这样的插件，但是我们公司不用jquery，没有插件，所以我就试着自己写，我也不知道别人是怎么写的，纯粹是按着自己的想法来的。

直接上代码：

代码如下:

<!DOCTYPE html>

<html>

<he

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;这行代码来停止冒泡。大体就是这样，代码很简单。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!