// 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. 我没发现Mvc里的 web.config 有什么用。

    实验过程 由于 Mvc2+ 引入 Area ,导致文件夹结构发生变化. Mvc下的 web.config 所在的位置是: ~/Areas/MySystem/Views/Web.config 对应的请求 ...

  2. Window程序的安装与部署

    步骤: 1.新建项目—选择安装与部署—安装项目或使用安装向导,再这里我用的是安装向导 2.点击确定—下一步 3.点击下一步,选择主输出 4.点击下一步,添加文件 5.点击完成 设置: 右击安装项目 出 ...

  3. 阻塞队列--LinkedBlockingQueue

    什么叫线程安全?线程安全就是每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的. 线程安全就是说多线程访问同一代码,不会产生不确定的结果. 并行和并发区别1.并行是指两者同时 ...

  4. Spring-MVC接收request参数和向页面传值总结

    接收请求参数值,三种方式: 1使用HttpServletRequest获取 2使用@RequestParam注解 3使用自动封装机制封装成bean对象 向页面传值 1直接使用HttpServletRe ...

  5. NodeJS系列~目录

    回到占占推荐博客索引 Node.js官网对它的阐述 Node.js is a platform built on Chrome's JavaScript runtime for easily buil ...

  6. MySQL group_concat 1024 大小

    1. GROUP_CONCAT有个最大长度的限制,超过最大长度就会被截断掉,你可以通过下面的语句获得: SELECT @@global.group_concat_max_len; show varia ...

  7. PHP引号转义中解决POST，GET，Mysql数据自动转义问题

    在处理mysql和GET.POST的数据时,常常要对数据的引号进行转义操作. PHP中有三个设置可以实现自动对’(单引号),”(双引号),\(反斜线)和 NULL 字符转转. PHP称之为魔术引号,这 ...

  8. 《精通移动app测试实战：技术、工具和案例》图书目录

    图书相关链接: 京东网:http://item.jd.com/11891239.html 当当网:http://product.dangdang.com/23924601.html 亚马逊:https ...

  9. 幾個步驟輕鬆在windows操作系統上搭建GO語言開發環境

    1. 首先下载官方GO語言安装包: https://code.google.com/p/go/wiki/Downloads?tm=2 2. 设置 GOPATH 在任意磁盘根目录新建一个文件夹,名字随意 ...

  10. AP6181 正基 WIFI 模块

    a. Module size: 12*12mm (pin to pin compatible) Package: Stamp type 44pins AP6181: WiFiAP6210: WiFi/ ...