Question

我正在尝试向tags cloud plugin添加一些动画。但我坚持一个问题。如何在父容器中保留子元素（标签）？我想确保动画位置永远不会与容器的一个边缘重叠。

Codepen URL：http://codepen.io/anon/pen/vgLdWV我特意注释掉了“overflow：hidden;”所以你可以看到标签在容器外飞行。

function getRandom (max, min) {
    return Math.floor(Math.random() * (1 + max - min) + min);
}

var words = [
        {text: "performance", weight: getRandom(2, 8)},
        {text: "education", weight: getRandom(2, 8)},
        {text: "employee", weight: getRandom(2, 8)},
        {text: "people", weight: getRandom(2, 8)},
        {text: "future", weight: getRandom(2, 8)},
        {text: "success", weight: getRandom(2, 8)},
        {text: "talent", weight: getRandom(2, 8)},
        {text: "career", weight: getRandom(2, 8)},
        {text: "strategy evaluate", weight: getRandom(2, 8)},
        {text: "training & development", weight: getRandom(2, 8)},
        {text: "learn", weight: getRandom(2, 8)},
        {text: "activities", weight: getRandom(2, 8)}
    ];
    $('#keywords').jQCloud(words, {
        shape: 'elliptic',
        removeOverflowing: false,
        afterCloudRender: function () {



            var box = $(this);
            var width = box.width();
            var height = box.height();
            var chute = $('span', box);



            chute.each(function () {
                foo($(this));
            });



            function foo($el) {
                var $top = (Math.random() * (height - $el.height() - $el.position().top)) | 0;
                var $left = (Math.random() * (width - $el.width() - $el.position().left)) | 0;
                var time = Math.random() * (1200 - 400) + 400 | 0;


                new TimelineLite({
                    onComplete: function () {
                        foo($el);
                    }
                })
                .to($el, time/100, {
                    y: $top * (Math.round(Math.random()) * 2 - 1),
                    x: $left * (Math.round(Math.random()) * 2 - 1),
                    z: getRandom(-200, 200) * (Math.round(Math.random()) * 2 - 1),
                    transformPerspective: 800,
                    force3D: true,
                    ease: SlowMo.ease.config(0.3, 0.7, false)
                }, 'one')
                .to($el, time/200, {
                    opacity: 1,
                    ease: SlowMo.ease.config(0.3, 0.7, false)
                }, 'one')
                .to($el, time/200, {
                    opacity: 0,
                    ease: SlowMo.ease.config(0.3, 0.7, false)
                }, time/200, 'one')
                .set($el, {
                    y: $top * (Math.round(Math.random()) * 2 - 1),
                    x: $left * (Math.round(Math.random()) * 2 - 1),
                    force3D: true
                });


            }


        }
    });

Answer 1

如果有兴趣，here is my solution暂时

$('#tagscloud').jQCloud(words, {
        // shape: 'elliptic',
        removeOverflowing: false,
        afterCloudRender: function () {
            var $box      = $(this),
                $boxWidth = $box.width(),
                $boxHeight = $box.height();

        // 
            $('span', $box).each(function () {
                tagsMovement($(this));
            });

        // 
            function tagsMovement (el) {
                var topY    = $(el).position().top,
                    bottomY = $boxHeight - $(el).height() - $(el).position().top,
                    $top    = topY >= bottomY ? -getRandom(15, topY) : getRandom(15, bottomY),

                    leftX   = $(el).position().left,
                    rightX  = $boxWidth - $(el).width() - $(el).position().left,
                    $left   = leftX >= rightX ? -getRandom(15, leftX) : getRandom(15, rightX),

                    time     = Math.random() * (1200 - 400) + 400 | 0;

                // var $top = (Math.random() * (height - $(el).height() - $(el).position().top)) | 0;
                // var $left = (Math.random() * (width - $(el).width() - $(el).position().left)) | 0;

                new TimelineLite({
                    onComplete: function () {
                        tagsMovement($(el));
                    }
                })
                .to($(el), time/75, {
                    y: $top,
                    x: $left,
                    z: getRandom(-300, 300),
                    transformPerspective: 800,
                    force3D: true,
                    ease: Sine.easeInOut
                }, 'one')
                .to($(el), time/150, {
                    opacity: 1,
                    ease: Sine.easeInOut
                }, 'one')
                .to($(el), time/150, {
                    opacity: 0,
                    ease: Sine.easeInOut
                }, time/150, 'one')
                .set($(el), {
                    top: topY + $top,
                    left: leftX + $left,
                    y: 0,
                    x: 0,
                    force3D: true
                });
            }
        }
    });

将孩子留在父容器中

1 个答案: