效果如下: 当鼠标移动到版主管理，显示用户管理层，位置为其下方，鼠标从该层上方移走，该层隐藏。
jquery 类：
代码
/*
* layercontrol 1.0
* Copyright (c) 2010
* Date: 2010-08-27
* 层控制
*/
(function($) {
$.fn.layercontrol = function(options) {
var defaults = {
openlayerObj: options //隐藏层对象
}
var options = $.extend(defaults, options);
this.each(function() {
var Obj = $(this);
$(Obj).bind("mouseover", function(e) {
var offset = $(e.target).offset();
offset.top += $(this).height();
$("#" + options.openlayerObj).css(offset).show();
// $("#" + options.openlayerObj).focus();
// $("#ShowInfo").focus();
// void (0);
});
$("#" + options.openlayerObj).bind("mouseout", function(e) {
$(this).css('display', 'none')
});
$("#" + options.openlayerObj).bind("mouseover", function(e) {
$(this).css('display', 'block')
});
// $("#" + options.openlayerObj).bind("blur", function(e) {
//
// $(this).css('display', 'none')
// });
});
};
})(jQuery);
html 页面使用方法:
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/layercontrol.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#base").layercontrol("openwindow");
$("#Div1").layercontrol("openwindow");
});
</script>
</head>
<body>
<div id="base" style=" 100px; height: 20px; margin-top: 150px; background-color: Red;">
信息管理
</div>
<div id="Div1" style=" 150px; height: 150px; margin-top: 600px; background-color: blue;">
laldlfsaldflsadf
</div>
<div id="openwindow" style="position: absolute; 80px; height: 80px; background-color: Green;">
跟随的idv
</div>
</body>
</html>
这边有个问题：如果想控制的方式为：不是从该层上移走隐藏，而是在弹出层之外的地方点击隐藏，大家有什么好的实现办法？