滑入滑出 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑入滑出</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #container {

            overflow: hidden;

        }

        #left {

            background: #ccc;

            float: left;

            width: 200px;

        }

        #content {

            background: #eee;
            overflow: hidden;
        }


    </style>
</head>
<body>
<div id="container">

    <div id="left" class="aside">Left Sidebar</div>

    <div id="content" class="section">Main Content</div>

</div>
<script type="text/javascript">
    $(function () {


        //alert('this is second line!');
        //滑动进入滑出
        var fbox = $('#hoverBox'),
                hbox = $('#hide');
        var w = fbox.outerWidth(),
                h = fbox.outerHeight();
        fbox.mouseenter(function (e) {
            var inX = (e.clientX - fbox.offset().left - (w / 2)) * (w > h ? (h / w) : 1);
            console.log(e.clientX - fbox.offset().left - (w / 2));
            var inY = (e.clientY - fbox.offset().top - (h / 2)) * (h > w ? (w / h) : 1);
            var direction = Math.round((((Math.atan2(inY, inX) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
            // 上(0) 右(1) 下(2) 左(3)
            switch (direction) {
                case 0:
                {
                    //上
                    hbox.css({'left': 0, 'top': '-100%'});
                }
                    break;
                case 1:
                {
                    //右
                    hbox.css({left: '100%', top: '0'});
                }
                    break;
                case 2:
                {
                    //下
                    hbox.css({left: '0', top: '100%'});
                }
                    break;
                case 3:
                {
                    //左
                    hbox.css({left: '-100%', top: '0'});
                }
                    break;
            }
            hbox.animate({'left': 0, 'top': 0}, 200);
        });

        fbox.mouseleave(function (e) {
            var inX = (e.clientX - fbox.offset().left - (w / 2)) * (w > h ? (h / w) : 1);
            var inY = (e.clientY - fbox.offset().top - (h / 2)) * (h > w ? (w / h) : 1);
            var direction = Math.round((((Math.atan2(inY, inX) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
            // 上(0) 右(1) 下(2) 左(3)
            switch (direction) {
                case 0:
                {
                    //上
                    hbox.animate({'left': '0', 'top': '-100%'}, 200);
                    ;
                }
                    break;
                case 1:
                {
                    //右
                    hbox.animate({'left': '100%', 'top': '0'}, 200);
                    ;
                }
                    break;
                case 2:
                {
                    //下
                    hbox.animate({'left': 0, 'top': '100%'}, 200);
                    ;
                }
                    break;
                case 3:
                {
                    //左
                    hbox.animate({'left': '-100%', 'top': 0}, 200);
                    ;
                }
                    break;
            }
        });
    });
</script>
</body>
</html>
posted @ 2016-04-06 09:26  daxia11  阅读(534)  评论(0)    收藏  举报