jQuery UI--jquery-autohide解读
// 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解读的更多相关文章
- 知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...
- 第一百七十七节，jQuery，知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...
- 241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- JQuery UI - selectable
·概述 Selectable插件允许用户对指定的元素进行选中的动作.此外还支持按住Ctrl键单击或拖拽选择多个元素. 官方示例地址:http://jqueryui.com/demos/selectab ...
- JQuery UI - resizable调整区域大小
JQuery UI - resizable ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- jQuery UI与jQuery easyUI的冲突解决办法
jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...
随机推荐
- C语言 线性表 链式表结构 实现
一个单链式实现的线性表 mList (GCC编译). /** * @brief 线性表的链式实现 (单链表) * @author wid * @date 2013-10-21 * * @note 若代 ...
- 作业七：团队项目——Alpha版本冲刺阶段-04
昨天进展:象棋图片以及窗体完成 今天安排:代码编写.
- windowsXP用户被禁用导致不能网站登录
1.查看系统事件,发现弹出如下的错误 2.根据上面的错误,我们很容易就可以判断是禁用了账户引起的 2.1后面进入计算机管理,再进入用户管理 2.2双击点开Internet来宾用于,发现此用户已经停用了 ...
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...
- Excel Interactive View - 让页面表格的功能更强大
MS Office Excel Services提供了一个非常强大的功能,允许你只需要在页面上添加非常少量的JS references,就可以让你在页面上将表格的内容以Excel图表的方式呈现.这里是 ...
- Lingo 做线性规划 - Asset allocation and Portfolio models
Reference: <An Introduction to Management Science Quantitative Approaches to Decision Making, Rev ...
- 搭建wamp环境，数据库基础知识
服务器管理软件php Apache.net IISjava Tomcat 服务器管理软件起到的作用:管理服务器工作,具体的工作如下:1.静态页面用户将请求发送到服务器,服务器中的服务器管理软件将请求发 ...
- Leetcoede 112 Path Sum 二叉树
二叉树的从叶子到根的和是否存在 /** * Definition for binary tree * struct TreeNode { * int val; * TreeNode *left; * ...
- Shell脚本学习入门（一）
1.Shell脚本是解释型的语言. 2.Shell脚本建立的基本步骤: 3.Shell脚本文件的第一行一般可以是:"#! 路径名 -(选项)", 为了要使Shell脚本有移植性,请 ...
- discuz x3在DIY模块中调用伪静态不成功，显示动态链接的解决办法
discuz x3在DIY模块中调用伪静态不成功,显示动态链接,然而其他的链接正常显示伪静态. 后台启用伪静态后,发现论坛版块.帖子点击链接,伪静态正常显示,然后在门户首页DIY显示的帖子,点进去后发 ...