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进行替 ...
随机推荐
- ajax异步请求Response.Redirect重定向
一个ajax异步请求报错->捕获异常->重定向错误提示页面. 一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...
- ArcMap 连接SDE 出错“Failed to connect to the specified server. Entry for SDE instance no found in services file.”
问题描述 环境: ARCMAP 10.0 ARCSDE FOR ORACLE 10.0 在通过用ArcMap 连接ORACLE SDE时出现上面的错. 解决方式 在 C:\Windows\Sy ...
- quartznet笔记
http://sourceforge.net/projects/quartznet/files/quartznet/
- 真实世界：使用WCF扩展在方法调用前初始化环境
OperationInvoker 介绍 OperationInvoker 是 WCF 运行时模型中在调用最终用户代码前的最后一个扩展点,OperationInvoker 负责最终调用 Service ...
- SpringMVC关于json、xml自动转换的原理研究[附带源码分析]
目录 前言 现象 源码分析 实例讲解 关于配置 总结 参考资料 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:http://www.c ...
- fancybox,Ckeditor,jscrollpane 笔记串烧
有用到一些插件,整理了一些笔记,分享一下. 一.Fancybox 很酷很强大的弹窗插件 官网地址:Fancybox,基于jquery,开源协议是GPL和MIT. 主要的特点是:能展示图片,html元素 ...
- [J2ME] 获得MIDlet信息
import javax.microedition.lcdui.Display; import javax.microedition.lcdui.Form; import javax.microedi ...
- C++ Primer 快速入门
<C++ Primer 4th> 读书摘要 必须有一个命名为 main.操作系统通过 main 函数返回的值来确定程序是否成功执行完毕.返回 0 值表明程序程序成功执行完毕.任何其他非零的 ...
- 汇编int21h，DOS调用（转）
表:DOS系统功能调INT 21H AH 功能 调用参数 返回参数 00 程序终止(同INT 20H) CS=程序段前缀 01 键盘输入并回显 AL=输入字符 02 显示输出 DL=输出字符 03 异 ...
- asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...