快捷導(dǎo)航

jQuery焦點(diǎn)控制圖層展示延遲隱藏的方法

更新時(shí)間：2015年03月09日 09:14:35 作者：.Devil

這篇文章主要介紹了jQuery焦點(diǎn)控制圖層展示延遲隱藏的方法,實(shí)例分析了jQuery操作圖層的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery焦點(diǎn)控制圖層展示延遲隱藏的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

</head>

<body>

<b id="button">點(diǎn)我</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:焦點(diǎn)控制圖層展示,延遲隱藏

        //focusShow({butID:'按鈕ID',divID:'容器ID',mouse:'over || click',time:'時(shí)間'})

        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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery+ajax實(shí)現(xiàn)文章點(diǎn)贊功能的方法
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)文章點(diǎn)贊功能的方法,涉及jQuery基于ajax無刷新post提交實(shí)現(xiàn)點(diǎn)贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下
2015-12-12
EasyUI框架使用Ajax提交注冊信息的實(shí)現(xiàn)代碼
這篇文章主要介紹了EasyUI框架使用Ajax提交注冊信息的實(shí)現(xiàn)代碼的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09
關(guān)于Jquery操作Cookie取值錯(cuò)誤的解決方法
使用JQuery操作cookie時(shí) 發(fā)生取的值不正確,結(jié)果發(fā)現(xiàn)cookie有四個(gè)不同的屬性，下面與大家分享下錯(cuò)誤的原因及解決方法
2013-08-08
jQuery siblings()用法實(shí)例詳解
siblings() 獲得匹配集合中每個(gè)元素的同胞，通過選擇器進(jìn)行篩選是可選的。接下來通過本文給大家介紹jQuery siblings()用法實(shí)例詳解，需要的朋友參考下吧
2016-04-04
artDialog雙擊會關(guān)閉對話框的修改過程分享
artDialog，一個(gè)jquery的對話框插件但是在使用時(shí)發(fā)現(xiàn)鼠標(biāo)雙擊時(shí)會自半對話框，下面與大家分享下具體的修改過程，感興趣的朋友可以參考下
2013-08-08
jQuery實(shí)現(xiàn)在textarea指定位置插入字符或表情的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)在textarea指定位置插入字符或表情的方法,實(shí)例分析了jQuery操作表單元素的技巧,非常實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
精心挑選的12款優(yōu)秀的基于jQuery的手風(fēng)琴效果插件和教程
當(dāng)你想在有限的頁面空間內(nèi)展示多個(gè)內(nèi)容片段的時(shí)候，手風(fēng)琴（Accordion）效果就顯得非常有用，它可以幫助你以對用戶非常友好的方式實(shí)現(xiàn)多個(gè)內(nèi)容片段之間的切換。借助流行的 jQuery 框架，只需很少的代碼就可以實(shí)現(xiàn)精美的手風(fēng)琴效果，幫助你的網(wǎng)站吸引更多用戶的眼球
2012-08-08
jQuery實(shí)現(xiàn)返回頂部按鈕和scroll滾動(dòng)功能[帶動(dòng)畫效果]
這篇文章主要介紹了jQuery實(shí)現(xiàn)返回頂部按鈕和scroll滾動(dòng)功能[帶動(dòng)畫效果],需要的朋友可以參考下
2017-07-07
jQuery彈性滑動(dòng)導(dǎo)航菜單實(shí)現(xiàn)思路及代碼
用一個(gè)絕對定位的div作為動(dòng)畫滑塊,改變它的left屬性來呈現(xiàn)動(dòng)畫效果javascript：hover()觸發(fā)移動(dòng)鼠標(biāo)到導(dǎo)航nav的動(dòng)作，和移出導(dǎo)航nav的動(dòng)作
2013-05-05
jQuery 3.0十大新特性
在2016年6月迎來了jquery3.0最終版，jquery3.0有哪些新特征呢？很多朋友不是很清楚，下面小編給大家?guī)砹薺Query 3.0十大新特性，感興趣的朋友一起看下吧
2016-07-07