一直都在有些网站上看到导航栏显示隐藏的效果,倒是自己没有做过,前两天做页面的时候要用到,于是研究了一下,代码如下:
//This is for navigation bar hide.
$(document).mouseleave(function(e){
$("#testspan").text(e.pageX + ", " + e.pageY + ", " + $(window).height() + ", " + $(window).width());
if(e.pageX <= $(window).height())
{
if(e.pageY < e.pageX)
{
$(".pg_header").css("top", "2px");
}
}
else{
if(e.pageY < ($(window).width() -e.pageX)){
$(".pg_header").css("top", "2px");
}
}
});
//This is for navigation bar show.
$(document).mousemove(function(e){
if(e.pageY > $(".pg_hd_size").height())
{
$(".pg_header").css("top", "-300px");
}
});
注:1、.pg_hd_size定义为导航栏的宽度大小等信息,.pg_header定义导航栏的位置。
2、本代码可以直接饮用,需要了解原理的请看下面说明。
3、本代码在FF下编译通过,未测试其他浏览器效果。
研究过程:
1、本来准备使用获得鼠标坐标来判断y坐标小于0(及离开页面顶端)时显示导航栏,不过鼠标移动速度过快时,即使鼠标已经离开了页面,但是获得的鼠标坐标值("#testspan"中显示)依然大于0,显然有误差,但是我们又不能奢望用户慢慢地移动鼠标,所以此路不通;
2、换个思路,使用mouseleave事件,判断鼠标离开页面时执行操作,不过问题又来了,屏幕有四个边缘(即使最大化时也还有上下两个边缘),所以我们必须判断鼠标离开页面时走的是那条路(哪个边缘),这里就需要加入一个判断了,经过大量的数据测试(鼠标离开屏幕上边缘时得到的坐标数据),我得出了一个结论,如果屏幕是一个正方形,那么每次鼠标离开上边缘时,纵坐标的值都小于横坐标,那么写判断就很简单了,可以参考代码(懒得画图了);
3、至于这里屏幕的宽度和高度为什么用window而不用body,我只能说可能是我自己的原因,我每次使用body的时候都会得到一个错误的高度,可能是因为使用了框架,不过具体错在哪我目前也不太清楚,凑合着用吧。