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

前言

突然想起来之前看到拉钩网上的hot_info(不知道该叫什么,但是拉钩网上这个divclasshot_info),感觉实现起来还是比较轻松简单的,效果也不错,于是简单模仿了一下。就不截图了,有兴趣的可以去拉钩网看看效果。模仿的效果可以点这里

技术

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

判断进入div的方向

首先用jQuery的offset()方法获得元素相对于页面的坐标;然后用event对象的pageXpageY属性,这是鼠标进入元素的相对于页面的坐标。要注意的是这两个坐标的值都是浮点型(当然也有直接进入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元素上都绑定了两个事件处理函数)。因为mouseovermouseout是会冒泡的,因此增加一个包装层,在包装层上绑定事件,再用event.target来获得目标就行。
posted @ 2017-01-22 17:27 -.-| 阅读(...) 评论(...) 编辑 收藏