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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
js实现时分秒倒计时
Dec 03 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP中的float类型使用说明
2010/07/27 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
JS之小练习代码
2008/10/12 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python实现网站的模拟登录
2016/01/04 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python 列表理解及使用方法
2017/10/27 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
业务员辞职信范文
2015/03/02 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android