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 自动安装exe程序
Nov 30 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
使用js获取身份证年龄的示例代码
Dec 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判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python变量赋值的秘密分享
2018/04/03 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
python实例化对象的具体方法
2020/06/17 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
经理职责范文
2013/11/08 职场文书
会议开场欢迎词
2014/01/15 职场文书
道德模范先进事迹
2014/02/14 职场文书
给学校的建议书
2014/03/12 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
合作协议书格式
2014/08/19 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis