js判断鼠标同时离开两个div的思路及代码


Posted in Javascript onMay 31, 2013

纠结了两天,憋出了个蛋,欢迎拍砖!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul{margin:0;padding:0} 
li{position:relative;margin:0;padding:0;;} 
.grid{background:#ccc;width:100px;height:100px;;} 
.f{background:#333;width:200px;height:200px;position:absolute;top:0;left:100px; display:none} 
</style> 
<script type="text/javascript" src="http://mat1.gtimg.com/www/js/tcomment/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
jQuery(function(){ 
window.a=0; window.b=1 ; //同为1隐藏弹层 
$('ul').delegate('.grid','mouseover',function(){ // 鼠标放在头像上 
if($('.f')){ 
$('ul').append('<div class="f"></div>') 
$('.f').css({top:$(this).offset().top}) 
} 
window.a=0; 
$('.f').show(); 
}) $('ul').delegate('.f','mouseover',function(){// 鼠标在弹层上 
window.b=0; 
}); 
$('ul').delegate('.grid','mouseout',function(){// 鼠标离开头像 
window.a=1; 
}) 
$('ul').delegate('.f','mouseout',function(){// 离开弹层 
window.b=1; 
}); 
setInterval(function(){//console.log(window.a +" "+ window.b +" "+ window.c); 
if(window.a&&window.b){ 
$('.f').hide(); 
} 
},100) 
}) 
</script> 
</head> 
<body> 
<ul> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
<li><div class="grid"></div></li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 #Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 #Javascript
js怎么终止程序return不行换jfslk
May 30 #Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 #Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 #Javascript
You might like
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
js动态创建标签示例代码
2014/06/09 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
关于Java finally的面试题
2016/04/27 面试题
副厂长岗位职责
2014/02/02 职场文书
个人实习生的自我评价
2014/02/16 职场文书
人事专员的职责
2014/02/26 职场文书
2014年新生军训方案
2014/05/01 职场文书
爱护公共设施标语
2014/06/24 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python