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常用代码段收集
Oct 28 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
vue实现lodop打印功能的示例
Nov 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 GD绘制24小时柱状图
2008/06/28 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
PHP实现文件上传与下载
2020/08/28 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript 继承详解(三)
2009/07/13 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
js中的面向对象入门
2017/03/06 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python中的集合介绍
2019/01/28 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
护士个人简历自荐信
2013/10/18 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
三年级数学教学反思
2014/01/31 职场文书
高中生家长寄语大全
2014/04/03 职场文书
亮剑观后感300字
2015/06/05 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python
Go归并排序算法的实现方法
2022/04/06 Golang