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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
js中常用的Math方法总结
Jan 12 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
JavaScript 接口原理与用法实例详解
May 12 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 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
纯JS实现五子棋游戏
2020/05/28 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Python 使用office365邮箱的示例
2020/10/29 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
应届生体育教师自荐信
2013/10/03 职场文书
应届生新闻编辑求职信
2013/11/19 职场文书
自主招生自荐信指南
2014/02/04 职场文书
党支部承诺书范文
2014/03/28 职场文书
运动会开幕式致辞
2015/07/29 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python