// 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. SQL SERVER--单回话下的死锁

    很多时候,死锁由两个或多个会话请求其他Session持有的锁而同时又持有其他Session,但也有一些特殊的死锁仅由单个Session锁触发,今天看到一篇相关的文章,搬运过来与各位共享! 引发死锁的代 ...

  2. 拟物设计和Angular的实现 - Material Design(持续更新)

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  3. [stm32] USART USART1收发功能工程

    >_<!功能:PC端发送一个特定的字符:0x0d 0x0a,单片机则返回一句话,如图: >_<!知识: 1.复用功能I/O和调试配置(AFIO)  为了优化外设数目,可以把一些 ...

  4. 重装Windows系统后，Linux系统启动引导失败

    说明:我的电脑是在装了Windows系统后,装的Linux系统,所以启动引导是Linux干的活.可是,今天重装了Windows系统,启动引导就换成了Windows的,Windows的启动引导把Linu ...

  5. Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现

    Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip  ...

  6. atitit. js 跨界面 页面 web cs 传值方法总结

    atitit. js 跨界面 页面 web cs 传值方法总结 #--需求 js #---两个方法:   直接传跟跟间接传递... 1.直接传跟new form(param)    web使用url方 ...

  7. paip.python连接mysql最佳实践o4

    paip.python连接mysql最佳实践o4 python连接mysql 还使用了不少时间...,相比php困难多了..麻烦的.. 而php,就容易的多兰.. python标准库没mysql库,只 ...

  8. RAR和ZIP:压缩大战真相

    转:http://fqd2eh4y.blog.163.com/blog/static/69195855200801035015857 前言--王者归来? 等待足足两年之久,压缩霸主WinZip终于在万 ...

  9. vbscript调用WMI一键式式发布网站

    作为.net开发,在window环境下,不得不熟悉些脚本语言,来减轻些日常开发中所遇到的一些繁杂的事情,比如自动发布网站,自动发布网站等等. WMI windows管理程序接口,可用各种与语言调用,方 ...

  10. 从零开始学Bootstrap(1)

    最近需要做一个简单的Web页面. 考虑到前端经验不足,为了快速产出,同时项目只是一个工具,对项目没有什么要求,所以我选择了Bootstrap这个框架作为Web框架. 写从零开始学Bootstrap的初 ...