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#开发微信 (18) 多客服
微信官方的多客服接口原理是通过用户发送的信息,开发者服务器返回一条指定类型的响应信息,使用户的对话状态切换到官方的多客服状态(持续一段时间),这段时间内用户发送的所有信息都不会到达开发者的服务器,而是 ...
- 在Mac/Linux/Windows上编译corefx遇到的问题及解决方法
这两天尝试在Mac/Linux/Windows三大平台上编译.NET跨平台三驾马车(coreclr/corefx/dnx)之一的corefx(.NET Core Framework),结果三个平台的编 ...
- 使用Js脚本 修改控制IE的注册表相关设置(activex等)
使用Js脚本 修改控制IE的注册表相关设置(activex等) 分类: PHP2012-12-05 18:51 2035人阅读 评论(2) 收藏 举报 脚本写法: <SCRIPT LANGUAG ...
- 自己动手写客户端UI库——创建第一个控件
在上一篇文章中我们主要讲了C#如何和JS通信, 这一篇文章中,我们将创建一个最基础的Button控件 WUI库中控件的继承机制 我们先解释最简单的继承机制,以后WUI库的继承机制会比这个复杂的多 ...
- 一个Java应用，三种字体风格(Java, Windows, Mac)，真是蛋疼
大家看看下面这张图,红色圈起来的是Java难看至极的字体渲染,黄色圈起来的是正常的Windows渲染,绿色是Mac风格的渲染. 其实我感觉正常风格就挺好的,就是看那个Java的Swing菜单,非常不顺 ...
- ASP.NET 5系列教程(七)完结篇-解读代码
在本文中,我们将一起查看TodoController 类代码. [Route] 属性定义了Controller的URL 模板: [Route("api/[controller]") ...
- paip.互联网产品要成功的要素
paip.互联网产品要成功的要素 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/atti ...
- paip.环境配置整合 ibatis mybatis proxool
paip.环境配置整合 ibatis mybatis proxool 索引: ///////////1.调用 ///////////////2. ibatis 主设置文件 com/mijie/ho ...
- Leetcode 19 Remove Nth Node From End of List 链表
删除从后往前数的第n个节点 我的做法是将两个指针first,second 先将first指向第n-1个,然后让first和second一起指向他们的next,直到first->next-> ...
- ORA-01033:ORACLE initialization or shutdown in progress
借用他人的经验 客户Oracle服务器进入PL/SQL Developer时报ora-01033:oracle initializationg or shutdown in progress 错误提示 ...