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


Posted in Javascript onJanuary 20, 2014

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

Javascript 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 #Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 #Javascript
js取值中form.all和不加all的区别介绍
Jan 20 #Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 #Javascript
引用外部脚本时script标签关闭的写法
Jan 20 #Javascript
用jquery写的一个万年历(自写)
Jan 20 #Javascript
js控制input框只读实现示例
Jan 20 #Javascript
You might like
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python一键升级所有pip package的方法
2017/01/16 Python
浅谈python可视化包Bokeh
2018/02/07 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python实现中文文本分句的例子
2019/07/15 Python
django页面跳转问题及注意事项
2019/07/18 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Django数据统计功能count()的使用
2020/11/30 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
财务人员担保书
2014/05/13 职场文书