共享一个例子:(折腾了我3个多小时呀,我这里只展示了部分功能)
来自:http://www.phpweblog.net/fuyongjie/admin/EditPosts.aspx?postid=5653
功能:
鼠标经过img通过ajax异步生成一个层(如:ajax_famous3),鼠标移开img但不悬浮在ajax_famous3层上,则ajax_famous3隐藏,若悬浮在了ajax_famous3上,该层不隐藏,当鼠标又移开ajax_famous3时,ajax_famous3又隐藏了
1.JS代码:
function ajax_post(id) {
//alert(id);
showDiv("famous"+id);
if(document.getElementById("ajax_famous"+id)) {//如果已经Ajax过了,就不再去Ajax
showDiv("ajax_famous"+id);
} else {
loading = "div[@name=loading"+id+"]";
$.ajax({
type: "get",
url: "{{url c=Post a=ACompanyPosts}}",
data: "member_id="+id,
beforeSend: function(){$(loading).show()},
success: function(a){if(document.getElementById("ajax_famous"+id)){return false;}else{$("#famous"+id).append(a)}}//再次确保前面没有ajax过 ,
complete: function(){$(loading).hide()}
})
}
}
function getAbsPoint(e) //e为元素对象,获得此元素的左上角坐标(x,y)和宽、高
{
var x = e.offsetLeft, y = e.offsetTop,h = e.clientHeight,w = e.clientWidth;
while(e=e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
// h += e.clientHeight;
}
//document.getElementById('x').
//$("#x").val(x+","+(x+w));
//$("#y").val(y+","+(y+h));
var ePoint = {"l":x,"t":y,"h":h,"w":w};
return ePoint;
}
function getMousePosition(event) {//获得鼠标坐标
var x = event.clientX;
var y = event.clientY;
if(!document.all){//适用firefox
mouse_x=event.pageX;
mouse_y=event.pageY;
}else{//适用ie
mouse_x=document.documentElement.scrollLeft+event.clientX;
mouse_y=document.documentElement.scrollTop+event.clientY;
//alert(document.documentElement.scrollTop); 滚动条滚过的高度,+ 显示页面的高度原因是声明后document.body.scrollTop的值永远等于0,解决办法是只需把document.body用 document.documentElement替换即可。
}
var mouseP = {"mouse_x":mouse_x,"mouse_y":mouse_y};
return mouseP;
}
function hiddenDiv(id,event) {
//alert(id);
mouseP = getMousePosition(event);
//alert("x:"+mouse_x+",y:"+mouse_y);
//$("#mx").val(mouse_x);
// $("#my").val(mouse_y);
ajax_id = 'ajax_'+id;
if(ajax_div=document.getElementById(ajax_id)) {
ePoint = getAbsPoint(ajax_div);
} else {
other_hiddenDiv(id); //ajax取消请求时,需隐藏要请求的内容
return false;
}
//此if语句表示鼠标在此元素范围以外,则隐藏某个层
if(mouseP.mouse_x < ePoint.l || mouseP.mouse_x > (ePoint.l + ePoint.w) || mouseP.mouse_y < ePoint.t || mouseP.mouse_y > (ePoint.t + ePoint.h)) {
document.getElementById("ajax_"+id).style.display = "none";
}
}
function other_hiddenDiv(id) {
document.getElementById(id).style.display = "none";
}
function showDiv(id) {
document.getElementById(id).style.display = "";
}
2.HTML代码:
<img title="{{$famous[i].emco_company}}" onmouseover="ajax_post('{{$famous[i].emco_member_id}}')"
onmouseout="hiddenDiv('famous{{$famous[i].emco_member_id}}',event)">鼠标经过这显示或隐藏生成的ajax层</img>
<div id="famous{{$famous[i].emco_member_id}}" style="margin_top:-20px;margin-left:50px;background-color:blue" width="100px"><!--ajax层-->
<div name="loading{{$famous[i].emco_member_id}}" style="display:none;position:absolute;z-index:999;">Loading...</div>
<!--AJAX层将会在此处产生-->
</div>
3.php后台:(生成ajax层
)
function actionACompanyPosts() { //生成ajax层
$posts = $this->_post->mACompanyPost();
//dump($posts);
$posts_div = "<div id=ajax_famous".$_GET['member_id']." width=300px style=\"position:absolute;z-index:999;background-color:#fff;border:1px solid black;margin-top:-30px\" onmouseout=\"hiddenDiv('famous".$_GET['member_id']."',event)\">";
if(!empty($posts)) {
$len = count($posts);
for($i = 0 ; $i < $len ; $i++) {
$posts_div .= ($i+1).". ".$posts[$i]['empo_name']."<br/>";
}
} else {
$posts_div .= "暂无职位";
}
$posts_div .= "</div>";
echo $posts_div;
}