欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

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

时间:2019-11-09|栏目:JavaScript|点击:

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

上一篇:引用外部脚本时script标签关闭的写法_基础知识_

栏    目:JavaScript

下一篇:JavaScript在for循环中绑定事件解决事件参数不同的情况_javascript技巧_

本文标题:js点击出现悬浮窗效果不使用JQuery插件_javascript技巧_

本文地址:http://www.jh-floor.com/wangyezhizuo/JavaScript/123337.html

您可能感兴趣的文章

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号