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

菜鸡中的战斗机 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时上升隐藏

...全文

358 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})
        }
    });