js判斷鼠標同時離開兩個div的思路及代碼
更新時間：2013年05月31日 17:29:43 作者：
js判斷鼠標同時離開兩個div想了好長時間終于出爐了，下面與大家分享下具體的實現(xiàn)代碼，感興趣的朋友可以參考下啊
糾結了兩天，憋出了個蛋，歡迎拍磚！??！
<!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>
復制代碼 代碼如下:
<!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>
相關文章
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了js實現(xiàn)點擊鏈接后窗口縮小并居中的方法,實例分析了javascript操作窗口的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
javascript實現(xiàn)驗證IP地址等相關信息代碼
本文給大家分享的是一組判斷IP地址是否合法，判斷子網(wǎng)掩碼是否合法，驗證輸入的網(wǎng)關地址是否合法的javascript代碼，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05
本篇文章要是對JS中的OffsetParent屬性進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所 幫助2014-01-01
這篇文章主要為大家詳細介紹了Bootstrap表單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
控制控件只能輸入數(shù)字,含-(負號).(小數(shù)點)2009-07-07
這篇文章主要介紹了JavaScript AJAX之惰性載入函數(shù),惰性載入表示函數(shù)執(zhí)行的分支僅會發(fā)生1次,是種JS的優(yōu)化技巧,需要的朋友可以參考下2014-08-08
平時項目里數(shù)據(jù)可視化展示用的大多是echarts或者highcharts,下面這篇文章主要給大家介紹了關于Echarts?x軸為time用法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
在javascript中申明變量使用的關鍵字都是var，這點與其他的編程語言不盡相同，但是javascript亦含有五種基本的數(shù)據(jù)類型（也可以說是簡單數(shù)據(jù)類型），它們分別是：Undefined，Null，Boolean，Number和String。還含有一種復雜數(shù)據(jù)類型—Object。這里我們不談復雜數(shù)據(jù)類型2015-08-08
對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解
今天小編就為大家分享一篇對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09