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调用CS里的带参方法实例
Aug 01 Javascript
JavaScript闭包详解
Feb 02 Javascript
js实现继承的5种方式
Dec 01 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
详解Node.js开发中的express-session
May 19 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php实现paypal 授权登录
2015/05/28 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
django如何通过类视图使用装饰器
2019/07/24 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python pillow模块使用方法详解
2019/08/30 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
四种会话跟踪技术
2015/05/20 面试题
医药营销个人求职信范文
2014/02/07 职场文书
党组织公开承诺书
2014/03/29 职场文书
保护环境倡议书300字
2014/05/19 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
战友聚会致辞
2015/07/28 职场文书
朋友离别感言
2015/08/04 职场文书
提档介绍信范文
2015/10/22 职场文书
个人向公司借款协议书
2016/03/19 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
MySQL Server 层四个日志
2022/03/31 MySQL