摘要:jQuery焦点控制图层展示延迟隐藏的方法教程,本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法。分享给大家供大家参考。具体实现方法如下:

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-jQuery焦点控制图层展示延迟隐藏的方法教程

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

jQuery焦点控制图层展示延迟隐藏的方法教程,本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法。分享给大家供大家参考。具体实现方法如下:

代码如下:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<b id="button">点我</b>
<p id="p" style="background:#faf;outline:none;display:none">我是内容</p>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
    jQuery.focusShow({butID:'#button',pID:'#p',mouse:'over',time:'500'})
})
jQuery.extend({
    focusShow: function(config){
        //ps:焦点控制图层展示,延迟隐藏
        //focusShow({butID:'按钮ID',pID:'容器ID',mouse:'over || click',time:'时间'})
        var butID = $(config.butID || false),
            pID = $(config.pID || false),
            mouse = config.mouse || 'click',
            time = config.time || '500',
            timer;
        function re(){$(pID).hide()}
        switch (mouse){
            case "click":
                butID.bind({'click':function(){pID.attr('tabindex','-1');pID.focus()}});
                pID.bind({
                    "focus":function(){clearTimeout(timer);pID.show()},
                    "blur":function(){timer = setTimeout(re,time)}
                })
                break
            case "over":
                $(butID,pID).each(function(){
                    $(this).bind({
                        'mouseover':function(){clearTimeout(timer);pID.show()},
                        'mouseout':function(){timer = setTimeout(re,time)}
                    })
                })
                break
            default:
        }
    }
});
</script>
</body>
</html>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-jQuery焦点控制图层展示延迟隐藏的方法教程

全部内容,希望文章能够帮你解决

javascript代码实例教程-jQuery焦点控制图层展示延迟隐藏的方法教程

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过