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 相关文章推荐
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
JS打印组合功能
Aug 04 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
详解angular中的作用域及继承
May 31 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Python正则简单实例分析
2017/03/21 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
numpy返回array中元素的index方法
2018/06/27 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
浅谈python出错时traceback的解读
2020/07/15 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
小学家长会邀请函
2014/01/23 职场文书
酒店管理求职信
2014/06/09 职场文书
岗位安全生产责任书
2014/07/28 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
警示教育片观后感
2015/06/17 职场文书
结婚十年感言
2015/07/31 职场文书
七年级生物教学反思
2016/02/20 职场文书
python实现层次聚类的方法
2021/11/01 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP