// jQuery Autohide v1.0.2

 // (c) 2014 Alex Taujenis

 // MIT License

 (function($) {

   return $.fn.autohide = function(opts) {

     var Delay;

     Delay = (function() {

       Delay.prototype.timeout = 1000;

       function Delay(el, opts) {

         this.el = el;

         if ((opts != null) && ("timeout" in opts)) {

           this.timeout = parseInt(opts["timeout"]);

         }

         $(window).mousemove(((function(_this) {

           return function() {

             return _this.mouseDelay();

           };

         })(this)));

         this;

       }

       Delay.prototype.mouseDelay = function() {

         if (!this.shown) {

           this.showMouse();

         }

         window.clearTimeout(this.mouse_timeout);

         this.mouse_timeout = window.setTimeout(((function(_this) {

           return function() {

             return _this.hideMouse();

           };

         })(this)), this.timeout);

       };

       Delay.prototype.showMouse = function() {

         this.el.css("cursor", "default");

         this.shown = true;

       };

       Delay.prototype.hideMouse = function() {

         this.el.css("cursor", "none");

         this.shown = false;

       };

       return Delay;

     })();

     new Delay(this, opts);

     return this;

   };

 })(jQuery);

jQuery-autohide源码

设计思路：

　　1、采用函数自执行的方法，在独立的作用域中将方法绑定到jQuery上

　　2、定义构造函数Delay，并在构造函数中初始化timeout（多长时间不动后隐藏鼠标指针），同时在window上绑定mousemove事件，

　　　　当鼠标移动时，执行mouseDelay方法

　　3、mouseDelay方法中，判断鼠标的状态，如果处于隐藏状态就显示出来。重新绑定setTimeout，在timeout的时间之后再次隐藏

　　4、显隐鼠标执行使用的是css（cursor:default/none）;

使用方法：

　　在使用jQuery选择器选择的jQuery对象上调用autohide()方法

　　DEMO:

 <!DOCTYPE html>

 <html>

 <head>

   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

   <script src="../src/jquery.autohide.js" type="text/javascript"></script>

   <style> body {margin: 0px;} </style>

   <script type="text/javascript">

     $(document).ready(function(){

       $("img").autohide();

     });

   </script>

 </head>

 <body>

   <img src="hubble_ultra_deep_field.jpg">

 </body>

 </html>

jQuery UI--jquery-autohide解读的更多相关文章

  1. 知问前端——概述及jQuery UI

    知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...

  2. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

  3. 第一百七十七节，jQuery，知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  4. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  5. 06-老马jQuery教程-jQuery高级

    1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...

  6. 241个jquery插件—jquery插件大全

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  7. JQuery UI - selectable

    ·概述 Selectable插件允许用户对指定的元素进行选中的动作.此外还支持按住Ctrl键单击或拖拽选择多个元素. 官方示例地址:http://jqueryui.com/demos/selectab ...

  8. JQuery UI - resizable调整区域大小

    JQuery UI - resizable   ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable ...

  9. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  10. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

随机推荐

  1. modelbinder机制原理

    ModelBinder介绍 一．问题描述 当运行一个Mvc时,你控制器中的Action方法需要参数数据:而这些参数数据包含在HTTP请求中,包括表单上的Value和URL中的参数等.但问题是控制器中的 ...

  2. KALI LINUX WEB 渗透测试视频教程—第十九课-METASPLOIT基础

    原文链接:Kali Linux Web渗透测试视频教程—第十九课-metasploit基础 文/玄魂 目录 Kali Linux Web 渗透测试视频教程—第十九课-metasploit基础..... ...

  3. 分享我用Qt开发的应用程序【一】，附绿色版下载，以后会慢慢公布源码

    写在前面: 1.第一版的代码还有些烂,等功能开发齐全了,做一次重构,再慢慢分享代码 2.邮箱功能.自动升级功能还没有做,笔记功能和备忘功能是好用的,大家如果不嫌弃,可以先用起来 3.笔记功能目前还不能 ...

  4. Spring-Context之一:一个简单的例子

    很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...

  5. Redis教程(九)：主从复制配置实例

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/136.html 一.Redis的Replication: 这里首先需要说明 ...

  6. linxu ffmpeg 编译安装

    1.下载ffmpeg. 下载网址:http://www.ffmpeg.org/download.html 2.解压缩 tar -zxvf ffmpeg-2.0.1.tar.gz 3.配置,生成Make ...

  7. Linux-vmware tools安装与cdrom挂载

    前述 昨天想直接复制虚拟机centos系统中命令行的内容到主机的txt文档上进行保存,发现不能实现虚拟机与主机之间的直接通讯,后来查资料发现原来是由于我的虚拟机没有安装vwmare tools的缘故. ...

  8. paip.常用汉字形声字大全3500字

    paip.常用汉字形声字大全3500字 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/at ...

  9. 菜鸟日记-HTML

    第一部分  HTML---Hyper Text Markup Language--超文本标记语言 1.HTML标准:<html> <head> 网页上的控制信息 <tit ...

  10. javaweb学习总结(十六)——JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...