// 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>