// 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. 尝试在Linux上编译KestrelHttpServer

    Kestrel是目前在非Windows平台上运行ASP.NET 5应用程序的唯一可用Web服务器,但微软似乎将它冷落在一边,源代码更新很慢. 今天试着在Linux上编译Kestrel的源代码,遇到了很 ...

  2. Kali Linux Web 渗透测试视频教程— 第二课 google hack 实战

    Kali Linux Web 渗透测试— 第二课 代理简介 文/玄魂 课程地址: http://edu.51cto.com/course/course_id-1887.html 目录 shellKal ...

  3. 降龙十八掌之一：(亢龙有悔)SQL Server Profiler和数据库引擎优化顾问

    简介 说到Sql的[性能工具]真是强大,SQL Server Profiler的中文意思是SQL Server事件探查,这个到底是做什么用的呢?我们都知道探查的意思大多是和监视有关,其实这个SQL S ...

  4. [J2ME] 基本框架框架

    import javax.microedition.lcdui.Command; import javax.microedition.lcdui.CommandListener; import jav ...

  5. iis6.0报以下的错。。

    Could not load file or assembly 'System.Core, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec8 ...

  6. HTML5 ——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  7. lucene如何通过docId快速查找field字段以及最近距离等信息？

    http://www.cnblogs.com/LBSer/p/4419052.html 1 问题描述 我们的检索排序服务往往需要结合个性化算法来进行重排序,一般来说分两步:1)进行粗排序,这一过程由检 ...

  8. 更新日志 - BugHD Android 客户端上线

    当我们讨论 Bug 的时候,总是一脸愁容.尤其是移动应用的开发者,要应对用户可能在各种场景下使用 App 时产生的莫名崩溃. 为了更好地解决开发者的焦虑,BugHD Android 客户端上线了,高效 ...

  9. Leetcode 65 Valid Number 字符串处理

    由于老是更新简单题,我已经醉了,所以今天直接上一道通过率最低的题. 题意:判断字符串是否是一个合法的数字 定义有符号的数字是(n),无符号的数字是(un),有符号的兼容无符号的 合法的数字只有下列几种 ...

  10. Html+css 练习写页面发现的错误及解决办法。

    最近开始模仿写一些静态页面,今天模仿的是中华咨询网.写了一个简单的js(功能:当鼠标hover一级菜单的时候,设置二级菜单为显示,当鼠标hover二级菜单的选项时候,二级菜单不收回.当鼠标移出菜单一级 ...