// 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. 使用NHibernate(10) -- 补充（inverse && cascade）

    1,inverse属性的作用: 只有集合标记(set/map/list/array/bag)才有invers属性: 以set为例,set的inverse属性决定是否把对set的改动反应到数据库中去,i ...

  2. 真实世界：使用WCF扩展在方法调用前初始化环境

    OperationInvoker 介绍 OperationInvoker 是 WCF 运行时模型中在调用最终用户代码前的最后一个扩展点,OperationInvoker 负责最终调用 Service ...

  3. Windows Phone编程中Dispatcher.BeginInvoke的使用

    在学习Windows Phone 程序开发时经常会使用到Dispatcher.BeginInvoke()的编程方法,可能许多初学者并不熟悉Dispatcher.BeginInvoke的使用方法以及为什 ...

  4. C++ WIN32控制台异常关闭回调函数

    /* This is an example of the SetConsoleCtrlHandler function that is used to install a control handle ...

  5. 亚马逊云服务之CloudFormation

    亚马逊的Web Service其实包含了一套云服务.云服务主要分为三种: IaaS: Infrastructure as a service,基础设施即服务. PaaS: Platform as a ...

  6. ActiveReports 9实战教程（3）： 图文并茂的报表形式

    基于上面2节内容,我们搭建了AR9的开发环境,配置好了数据源.在本节,我们以官方提供的3个中文图文并茂的报表来展示AR9的功能,并通过实战的方式一一分享. 以往做报表相关的工作时,最害怕的是报表的UI ...

  7. MongoDB与.NET结合使用一（mongodb在windows 2003上的安装）

    mongodb发展至今已经到2.6版本了,自从获得了1亿美元的风投之后,发展速度更是比以前快了很多,前段时间因为要用缓存,也比较了mongodb,大家也都觉得比较适合做无关系化的大数据存储,所以系统统 ...

  8. 秀才提笔忘了字：javascript使用requestAnimationFrame实现动画

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的 ...

  9. 改写libsvmread读取多标记数据集

    在libsvm和liblinear软件包里有一个C函数叫libsvmread,这个函数的作用是把如下格式的文本文件\begin{align*} 1 & \ \ *:* \ \ *:* \\ - ...

  10. MySQL：InnoDB存储引擎的B+树索引算法

    很早之前,就从学校的图书馆借了MySQL技术内幕,InnoDB存储引擎这本书,但一直草草阅读,做的笔记也有些凌乱,趁着现在大四了,课程稍微少了一点,整理一下笔记,按照专题写一些,加深一下印象,不枉读了 ...