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