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 相关文章推荐
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
JavaScript错误处理
Feb 03 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 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
正则表达式语法
2006/10/09 Javascript
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
express express-session的使用小结
2018/12/12 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
用Python shell简化开发
2018/08/08 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
团日活动总结报告
2014/06/25 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS