jQuery焦点控制图层展示延迟隐藏的方法

本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法。分享给大家供大家参考。具体实现方法如下：
复制代码代码如下:
<！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">我是内容</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程序设计有所帮助。