简单模仿拉钩网上的“hot_info”

目录

• 前言
• 技术
• 判断进入div的方向
• 动画
• 绑定事件
• css
• html
• 还需改进的地方

前言

忽然想起来以前看到拉钩网上的hot_info（不知道该叫什么，可是拉钩网上这个div的class是hot_info），感受实现起来仍是比较轻松简单的，效果也不错，因而简单模仿了一下。就不截图了，有兴趣的能够去拉钩网看看效果。模仿的效果能够点这里。

技术

主要是用了jQuery。动画部分是animate()来实现的。

判断进入div的方向

首先用jQuery的offset()方法得到元素相对于页面的坐标；而后用event对象的pageX和pageY属性，这是鼠标进入元素的相对于页面的坐标。要注意的是这两个坐标的值都是浮点型（固然也有直接进入div内部的状况，鼠标滚轮啊之类的），显然只能比较距离，判断距离最近的就是进入的方向。

function judgeD(item, event) {
            //判斷方向
            var $this = $(item);
            var outx =  event.pageX;
            var outy = event.pageY;
            var offset = $this.offset();
            var itemx = offset.left;
            var itemy = offset.top;
            var width = parseInt($this.css('width'));
            var height = parseInt($this.css('height'));
            var min = {
                d: 'left',
                val: Math.abs(outx - itemx)
            }   
            var tempVal = Math.abs(outy - itemy);
            if (tempVal < min.val) {
                min.d = 'top';
                min.val = tempVal;
            }   
            var tempVal = Math.abs(outx - width - itemx);
            if (tempVal < min.val) {
                min.d = 'right';
                min.val = tempVal;
            }
            var tempVal = Math.abs(outy - height - itemy);
            if (tempVal < min.val) {
                min.d = 'bottom';
                min.val = tempVal;
            }   
            return min.d;
        };

动画

动画就很少说了。。，这个方法有些太长了。其中的flag是为了在快速移出移入的时候不闪烁，而且更天然一些。

function move($target, d, f, flag) {
            $target.show().stop(true);
            if (!flag) {
                switch(f) {
                    case 'left':
                        $target.css({
                            top: 0,
                            left: '-100%'
                        });
                        break;
                    case 'right':
                        $target.css({
                            top: 0,
                            left: '200%'
                        });
                        break;
                    case 'top':
                        $target.css({
                            top: '-100%',
                            left: 0
                        });
                        break;
                    case 'bottom':
                        $target.css({
                            top: '200%',
                            left: 0
                        });
                        break;
                    case 'center':
                        $target.css({
                            top: 0,
                            left: 0
                        });
                        break;
                }
            }
            var easing = 'swing';
            switch(d) {
                case 'left':
                    $target.animate({
                        top: 0,
                        left: '-100%'
                    }, {
                        speed: 500,
                        easing: easing,
                    });
                    break;
                case 'right':
                    $target.animate({
                        top: 0,
                        left: '200%'
                    }, {
                        speed: 500,
                        easing: easing,
                    });
                    break;
                case 'top':
                    $target.animate({
                        top: '-100%',
                        left: 0
                    }, {
                        speed: 500,
                        easing: easing,
                    });
                    break;
                case 'bottom':
                    $target.animate({
                        top: '200%',
                        left: 0
                    }, {
                        speed: 500,
                        easing: easing,
                    });
                    break;
                case 'center':
                    $target.animate({
                        top: 0,
                        left: 0
                    }, {
                        speed: 500,
                        easing: easing,
                    });
                    break;
            }
        }

绑定事件

$(function() {
            $('.test_item').hover(function(event) {
                var d = judgeD(this, event);
                var $target = $(this).find('.test_inner');
                move($target, 'center', d);
            }, function(event) {
                var d = judgeD(this, event);
                var $target = $(this).find('.test_inner');
                move($target, d, 'center', true);
            });
        });

css

html, body {
    width: 100%;
    height: 100%;
}

.test_item {
    width: 30%;
    height: 30%;
    overflow: hidden;
    background: #333;
    position: relative;
    float: left;
    margin: 15px;
}

.test_item .test_inner {
    width: 100%;
    height: 100%;
    top: 100%;
    left: 100%;
    background: #1fa67a;
    position: absolute;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <!-- Emmet -->
    (.test_item>.test_inner)*12
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</body>
</html>

还需改进的地方

除了有个方法太长了，还有其余一些须要改进的地方（实际上是太懒了懒得改了）：

1. 首先是污染了全局环境，闭包或者封装成对象均可解决。
2. 绑定的事件有点多（是指每个.test_item元素上都绑定了两个事件处理函数）。由于mouseover和mouseout是会冒泡的，所以增长一个包装层，在包装层上绑定事件，再用event.target来得到目标就行。