js判断鼠标同时离开两个div的思路及代码

纠结了两天，憋出了个蛋，欢迎拍砖！！！


代码如下:

<!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>

赞 (0)

相关推荐

  • JavaScript判断DIV内容是否为空的方法

    JavaScript判断DIV内容是否为空的方法

    1.问题背景 判断div内部是否为空,如果为空,给出无数据提示:否则显示正常页面 2.实现效果图如下所示: 3.设计源码 <!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/xh

  • js实现数组去重、判断数组以及对象中的内容是否相同

    复制代码 代码如下: /* *数组元素去重 */ if(typeof Array.prototype.distinct != "function"){ Array.prototype.distinct = function(){ this.sort(); for(var i=0;i<this.length-1;i++){ if($.isPlainObject(this[i]) && $.isPlainObject(this[i+1])){ if(o2o(this[

  • JS判断文本框内容改变事件的简单实例

    oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur): onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,

  • js判断FCKeditor内容是否为空的两种形式

    形式1: 复制代码 代码如下: function checkFCK(key) { var oEditor=FCKeditorAPI.GetInstance(key); var content=oEditor.GetXHTML(true); content=content.replace(/ /g,""); content=content.replace(/\s/g,""); content=content.replace(/ /g,""); co

  • js判断文本框输入的内容是否为数字

    如何验证文本框中的内容是否为数字,本文提供了三种方法,希望对大家的学习有所启发. 在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能. 下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]

  • js判断鼠标同时离开两个div的思路及代码

    纠结了两天,憋出了个蛋,欢迎拍砖!!! 复制代码 代码如下: <!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> <

  • js判断鼠标位置是否在某个div中的方法

    本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

  • js判断鼠标左、中、右键哪个被点击的方法

    本文实例讲述了js判断鼠标左.中.右键哪个被点击的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js判断鼠标左.中.右键哪个被点击-柯乐义</title> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2)

  • 利用JS判断鼠标移入元素的方向

    利用JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

  • JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    一.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢? 首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种比较方便的方法: 第一种方法,利用圆和反正切三角函数 如下图所示: 以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限. 代码如下: $(".box").on(&quo

  • JS判断鼠标从什么方向进入一个容器实例说明

    JS判断鼠标从什么方向进入一个容器实例说明

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方法,是基于jquery的,说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了.代码部分不是

  • JS onmousemove鼠标移动坐标接龙DIV效果实例

    JS onmousemove鼠标移动坐标接龙DIV效果实例

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 20px;            height: 20px;

  • js判断鼠标移入移出方向的方法

    PC端鼠标移入移出的效果很好,这里就给出判断鼠标移入移出的方法,有空再发出带效果的文章,不过授之以鱼不如受之以渔,有了个这个方法,效果不还是so easy吗? 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

  • 可以用鼠标拖动的DIV实现思路及代码

    复制代码 代码如下: <html><head> <title>测试可动div</title> <script language='javascript' type='text/javascript'> var offset_x; var offset_y; function Milan_StartMove(oEvent) { var whichButton; if(document.all&&oEvent.button==1) w

  • js捕获鼠标右键菜单中的粘帖事件实现代码

    js捕获鼠标右键菜单中的粘帖事件实现代码

    比如点击菜单中的"粘帖"后事件如何捕获  问题解决了! 用的jQuery中的paste事件,这里需要注意,如想获得粘帖文本要使用setTimeout控制下时间. 复制代码 代码如下: $("#input").bind('paste', function(e) { var el = $(this); setTimeout(function() { var text = $(el).val(); alert(text); }, 100); }); 貌似是在1.4版后加上

随机推荐