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

162 阅读 0 评论 107 点赞

我是靠谱客的博主动听牛排，最近开发中收集的这篇文章主要介绍js点击出现悬浮窗效果不使用JQuery插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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