jQuery焦點控制圖層展示延遲隱藏的方法
更新時間：2015年03月09日 09:14:35 作者：.Devil
這篇文章主要介紹了jQuery焦點控制圖層展示延遲隱藏的方法,實例分析了jQuery操作圖層的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery焦點控制圖層展示延遲隱藏的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<b id="button">點我</b>
<div id="div" style="background:#faf;outline:none;display:none">我是內(nèi)容</div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
jQuery.focusShow({butID:'#button',divID:'#div',mouse:'over',time:'500'})
})
jQuery.extend({
focusShow: function(config){
//ps:焦點控制圖層展示,延遲隱藏
//focusShow({butID:'按鈕ID',divID:'容器ID',mouse:'over || click',time:'時間'})
var butID = $(config.butID || false),
divID = $(config.divID || false),
mouse = config.mouse || 'click',
time = config.time || '500',
timer;
function re(){$(divID).hide()}
switch (mouse){
case "click":
butID.bind({'click':function(){divID.attr('tabindex','-1');divID.focus()}});
divID.bind({
"focus":function(){clearTimeout(timer);divID.show()},
"blur":function(){timer = setTimeout(re,time)}
})
break
case "over":
$(butID,divID).each(function(){
$(this).bind({
'mouseover':function(){clearTimeout(timer);divID.show()},
'mouseout':function(){timer = setTimeout(re,time)}
})
})
break
default:
}
}
});
</script>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery+ajax實現(xiàn)文章點贊功能的方法,涉及jQuery基于ajax無刷新post提交實現(xiàn)點贊功能的具體步驟與相關技巧,需要的朋友可以參考下2015-12-12
EasyUI框架 使用Ajax提交注冊信息的實現(xiàn)代碼
這篇文章主要介紹了EasyUI框架 使用Ajax提交注冊信息的實現(xiàn)代碼的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
使用JQuery操作cookie時 發(fā)生取的值不正確,結果發(fā)現(xiàn)cookie有四個不同的屬性，下面與大家分享下錯誤的原因及解決方法2013-08-08
siblings() 獲得匹配集合中每個元素的同胞，通過選擇器進行篩選是可選的。接下來通過本文給大家介紹jQuery siblings()用法實例詳解，需要的朋友參考下吧2016-04-04
artDialog，一個jquery的對話框插件但是在使用時發(fā)現(xiàn)鼠標雙擊時會自半對話框，下面與大家分享下具體的修改過程，感興趣的朋友可以參考下2013-08-08
jQuery實現(xiàn)在textarea指定位置插入字符或表情的方法
這篇文章主要介紹了jQuery實現(xiàn)在textarea指定位置插入字符或表情的方法,實例分析了jQuery操作表單元素的技巧,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
精心挑選的12款優(yōu)秀的基于jQuery的手風琴效果插件和教程
當你想在有限的頁面空間內(nèi)展示多個內(nèi)容片段的時候，手風琴（Accordion）效果就顯得非常有用，它可以幫助你以對用戶非常友好的方式實現(xiàn)多個內(nèi)容片段之間的切換。借助流行的 jQuery 框架，只需很少的代碼就可以實現(xiàn)精美的手風琴效果，幫助你的網(wǎng)站吸引更多用戶的眼球2012-08-08![jQuery實現(xiàn)返回頂部按鈕和scroll滾動功能[帶動畫效果]](http://img.jbzj.com/images/xgimg/bcimg7.png)
jQuery實現(xiàn)返回頂部按鈕和scroll滾動功能[帶動畫效果]
這篇文章主要介紹了jQuery實現(xiàn)返回頂部按鈕和scroll滾動功能[帶動畫效果],需要的朋友可以參考下2017-07-07
用一個絕對定位的div作為動畫滑塊,改變它的left屬性來呈現(xiàn)動畫效果javascript：hover()觸發(fā)移動鼠標到導航nav的動作，和移出導航nav的動作2013-05-05
在2016年6月迎來了jquery3.0最終版，jquery3.0有哪些新特征呢？很多朋友不是很清楚，下面小編給大家?guī)砹薺Query 3.0十大新特性，感興趣的朋友一起看下吧2016-07-07