鼠标移动控制
的隐藏和显示

菜鸡中的战斗机 2015-10-27 02:45:02

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
body,html,div,header,img,nav,ul,li,content,footer,p,h1,h2,input,a,span{margin:0;padding:0}
header,nav,content,footer,div,img,li,a,span{display:block}
body{min-width:960px}
header{position:fixed;height:52px;background-color:black;opacity:0.8;width:100%;min-width:960px;z-index: 999;top:-52px}
.logo{float:left;margin-left:50px;height:52px;width:120px;background-color:white;overflow:hidden}
.logo img{width:100%;height:100%}
nav{float:right;margin-right:50px}
nav ul,nav ul li{display:inline;float:left}
a{text-decoration:none;line-height:50px;padding-left:10px;padding-right:10px;color:white;}
a:hover{border-bottom:2px solid white}
.banner ul li{display:inline;float:left;width:25%;height:100%;overflow:hidden}
footer{position:absolute;bottom:0;left:0;height: 100px;width:100%;background-color: #efefef}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Introduction</a></li>
<li><a href="#">Vote</a></li>
<li><a href="#">Connect</a></li>
</ul>
</nav>
</header>
<footer>
鼠标坐标:<span id="message"></span>
</footer>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).mousemove(function(e){
$("#message").text(e.pageX + ", " + e.pageY);
if(e.pageY<=200)
$("header").animate({"top":0})
if(e.pageY>200)
$("header").animate({"top":-52})
});
</script>
</body>
</html>

以上是目前的代码,想实现鼠标移动到Y轴小于200px时,<header>下滑显示,而大于200px时上升隐藏
...全文
370 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2015-10-27
  • 打赏
  • 举报
回复

	var fl = false;
    $(document).mousemove(function(e){
        $("#message").text(e.pageX + ", " + e.pageY);
        if(!fl && e.pageY<=200){
	        fl = true;
            $("header").stop(true,true).animate({"top":0})
        }
        if(fl && e.pageY>200){
	        fl = false;
            $("header").stop(true,true).animate({"top":-52})
        }
    });
天际的海浪 2015-10-27
  • 打赏
  • 举报
回复

	var fl = false;
    $(document).mousemove(function(e){
        $("#message").text(e.pageX + ", " + e.pageY);
        if(!fl && e.pageY<=200){
	        fl = true;
            $("header").stop(true,true).animate({"top":0})
        }
        if(fl && e.pageY>200){
	        fl = false;
            $("header").stop(true,true).animate({"top":-52})
        }
    });
	var fl = false;
    $(document).mousemove(function(e){
        $("#message").text(e.pageX + ", " + e.pageY);
        if(!fl && e.pageY<=200){
	        fl = true;
            $("header").stop(true,true).animate({"top":0})
        }
        if(fl && e.pageY>200){
	        fl = false;
            $("header").stop(true,true).animate({"top":-52})
        }
    });

87,926

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧