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中的数学函数
Apr 04 Javascript
js的一些常用方法小结
Jun 29 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
JavaScript的Set数据结构详解
Feb 18 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
我整理的PHP 7.0主要新特性
2016/01/07 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python实现AI换脸功能
2020/04/10 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
软件项目实施计划书
2014/05/02 职场文书
离婚协议书格式范本
2016/03/18 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers