簡單模仿拉鉤網上的「hot_info」

時間 2019-12-12

標籤簡單模仿拉鉤網上 hot info 简体版

原文原文鏈接

目錄javascript

前言

忽然想起來以前看到拉鉤網上的hot_info（不知道該叫什麼，可是拉鉤網上這個div的class是hot_info），感受實現起來仍是比較輕鬆簡單的，效果也不錯，因而簡單模仿了一下。就不截圖了，有興趣的能夠去拉鉤網看看效果。模仿的效果能夠點這裏。css

技術

主要是用了jQuery。動畫部分是animate()來實現的。html

判斷進入`div`的方向

首先用jQuery的offset()方法得到元素相對於頁面的座標；而後用event對象的pageX和pageY屬性，這是鼠標進入元素的相對於頁面的座標。要注意的是這兩個座標的值都是浮點型（固然也有直接進入div內部的狀況，鼠標滾輪啊之類的），顯然只能比較距離，判斷距離最近的就是進入的方向。java

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是爲了在快速移出移入的時候不閃爍，而且更天然一些。jquery

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>