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进行替 ...
随机推荐
- 基于Criminisi算法的栅格影像数据敏感地物隐藏
栅格影像数据敏感地物伪装是指通过计算机智能识别与计算,将影像数据中的敏感地物进行识别与提取,将敏感地物智能替换成公共地物,如草地.森林.湖泊.公园等.但目前该技术并不成熟,同时栅格影像数据敏感地物伪装 ...
- thinkphp支持大小写url地址访问,不产生下划线
from:http://www.111cn.net/phper/thinkPhp/57748.htm 一.在配置文件中开启了thinkphp的大小写识别功能,使链接大小写都可以正常访问: ‘URL_C ...
- [ACM_数学] Taxi Fare [新旧出租车费差 水 分段函数]
Description Last September, Hangzhou raised the taxi fares. The original flag-down fare in Hangzhou ...
- 使用media Queries实现一个响应式的菜单
Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
- 浅谈Entity Framework中的数据加载方式
如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...
- 1.__tostring()这个方法在类里可以直接输出对象。2.克隆对象的运用
<?php //__tostring()这个方法在类里的用途 能够直接输出对象 class Ren { public $name; function Run() { echo "跑&q ...
- iOS开发-UIScrollView原理
UIScrollView在开发中是不可避免,关于UIScrollView都有自己一定的理解.滚动视图有两个需要理解的属性,frame和bounds,frame是定义了视图在窗口的大小和位置,bound ...
- phpMyAdmin 登陆需要密码
网页设计从事者在学习网页时都用过 "xampp" 这款软件吧. 本人今天正常使用时,系统提示可升级 phpMyAdmin.当前最新版本为:phpMyAdmin-4.6.4-all- ...
- 努力学习 HTML5 （1）—— 初体验
HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 & ...
- 简单谈谈Resource，Drawable和Bitmap之间的转换
一直接触这些东西,还是归个类整理一下比较好. Resource -> Drawable Drawable draw1 = this.getResources().getDrawable(R.dr ...