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


Posted in Javascript onMarch 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 #Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 #Javascript
JS实现文件动态顺序载入的方法
Mar 07 #Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 #Javascript
PHP守护进程实例
Mar 06 #Javascript
JavaScript操作Oracle数据库示例
Mar 06 #Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 #Javascript
You might like
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
react 生命周期实例分析
2020/05/18 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python+selenium开发环境搭建图文教程
2017/08/11 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
房地产开发项目建议书
2014/05/16 职场文书
大学生学年个人总结
2015/02/15 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android