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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
js window.event对象详尽解析
Feb 17 Javascript
javascript深入理解js闭包
Jul 03 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
pyqt5中动画的使用详解
2020/04/01 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
中秋节主题班会
2015/08/14 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
公司晚会主持词
2019/04/17 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
python基础学习之递归函数知识总结
2021/05/26 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android