2

我正在尝试创建 div 的随机移动（成功），并与随机不透明度更改（部分成功）相关联。我通过将两个单独的脚本混合在一起，将以下内容组合在一起。

不透明度仅在 div 的每次移动后发生变化。最终，我想让不透明度独立于运动而工作。任何帮助，将不胜感激！

我在这里的 jsFiddle中有它，或者：

HTML：

<div id="container">
<div class="a"></div>
</div>

CSS：

div#container {height:500px;width:100%;}

div.a {
   width: 284px;
   height:129px;
   background:url(http://www.themasterbetas.com/wp-content/uploads/2013/08/aliens.png);
   position:fixed;
 }

jQuery：

$(document).ready(function() {
    animateDiv();
    runIt();
});

function makeNewPosition($container) {
    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window));
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
}

function animateDiv() {
    var $target = $('.a');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv();
    });
}

function calcSpeed(prev, next) {
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;
}

function runIt() {
    var $fading = $('.a');
    $fading.fadeTo("fast", Math.random(), runIt);
}
4

2 回答 2

1

要使它们独立动画，您只需将动画应用于不同的元素。我创建了另一个 div ( .wrapper ) 来改变它的位置，而它的子 ( .a ) 改变它的不透明度。

这是新的 HTML：

<div id="container">
    <div class='wrapper'>
        <div class='a'></div>
    </div>
</div>

jsFiddle 演示

于 2013-08-20T06:26:05.680 回答
0

jsFiddle 演示

我也随机化了淡入淡出速度。我认为可以做更多的事情，包括随机化缓动效果、底部的一些彩色灯光和移动速度。总的来说，这是一个非常漂亮的小演示！

jQuery

$(document).ready(function () {
    animateDiv();
    makeItSo();
});

function makeNewPosition($container) {
    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window));
    var h = $container.height() - 50;
    var w = $container.width() - 50;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh, nw];
}

function animateDiv() {
    var $target = $('.warp');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function () {
        animateDiv();
    });
}

function calcSpeed(prev, next) {
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest / speedModifier);
    return speed;
}

function makeItSo() {
    var $fading = $('.ufo');
    $fading.fadeTo((Math.random() * 400), Math.random(), makeItSo);
}

CSS

div#container {
    height:500px;
    width:100%;
}
div.ufo {
    width: 284px;
    height:129px;
    background:url(http://www.themasterbetas.com/wp-content/uploads/2013/08/aliens.png);
    position:fixed;
}
div.warp {
    width: 284px;
    height:129px;
    position:fixed;
}

标记

<div id="container">
    <div class="warp">
        <div class='ufo'></div>
    </div>
</div>
于 2013-08-20T06:54:27.903 回答