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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
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的FTP学习(三)
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
出国留学计划书
2014/04/27 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
中考百日冲刺决心书
2015/09/22 职场文书