您的位置：首页 > Web前端 > JQuery

jQuery UI--jquery-autohide解读

2014-04-16 09:18 148 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航