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实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
vue文件树组件使用详解
Mar 29 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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中防止SQL注入实现代码
2011/02/19 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Python单例模式实例分析
2015/01/14 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python模糊图片过滤的方法
2018/12/14 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
业务部经理岗位职责
2014/01/04 职场文书
记帐员岗位责任制
2014/02/08 职场文书
住宅使用说明书
2014/05/09 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
为自己工作观后感
2015/06/11 职场文书
2019个人工作总结
2019/06/21 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python