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 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
jquery操作select方法汇总
Feb 05 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 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
15种PHP Encoder的比较
2007/04/17 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
JS实现文字掉落效果的方法
2015/05/06 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python 私有化操作实例分析
2019/11/21 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
什么是封装
2013/03/26 面试题
绿色学校实施方案
2014/03/31 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
学校食品安全责任书
2015/01/29 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
转变工作作风心得体会
2016/01/23 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
Python数据处理的三个实用技巧分享
2022/04/01 Python
Nginx安装配置详解
2022/06/25 Servers