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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
详解如何运行vue项目
Apr 15 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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 设计模式之观察者模式介绍
2012/02/22 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP中16个高危函数整理
2019/09/19 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python数据结构之翻转链表
2017/02/25 Python
python django事务transaction源码分析详解
2017/03/17 Python
Django 外键的使用方法详解
2019/07/19 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
.net工程师笔试题
2012/06/09 面试题
建筑学推荐信
2013/11/03 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
爱情保证书
2015/01/17 职场文书
保送生自荐信范文
2015/03/26 职场文书
学校运动会加油词
2015/07/18 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python