Question

我尝试在页面上创建4个或5个不同的元素，这些元素是动画的，可以在容器元素中随机移动，每个元素都有唯一的链接。

我很难理解如何使用唯一链接生成5个不同的div并让它们在页面周围随机/相互独立移动。

JSFiddle： https://jsfiddle.net/vyvqLza7/

JS代码：

            $(document).ready(function () {
            newDiv();
            newDiv2();
        });

        function newDiv() {
            var $div = $("<div class='a'><a href='#'>");
            $(".animatedDivs").append($div);
            animateDiv();
            var $div2 = $("<div class='a'><a href='#'>");
            $(".animatedDivs").append($div2);
            animateDiv2();

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

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

            function animateDiv2() {
                var newq = makeNewPosition();
                var oldq = $div.offset();
                var speed = calcSpeed([oldq.top, oldq.left], newq);

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

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

        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 = .4;
            var speed = Math.ceil(greatest / speedModifier);
            return speed;

        }

Answer 1

另一个答案也适用于动画5个div。要另外创建随机链接，您可以将link变量传递给函数newDiv()。我不知道您的链接应该是什么样子，但下面是如何创建一个随机字符串的唯一链接的示例。

＆＃13;

            $(document).ready(function () {
            	var divCount = 5;
            
              for (i = 0; i < divCount; i++) { 
                newDiv(i+"_"+(new Date).getTime());
              }

            });

            function newDiv(link) {
                var $div = $("<div class='a'><a href='#"+link+"'>");
                $(".animatedDivs").append($div);
                animateDiv();


                function animateDiv() {
                    var newq = makeNewPosition();
                    var oldq = $div.offset();
                    var speed = calcSpeed([oldq.top, oldq.left], newq);

                    $div.animate({top: newq[0],left: newq[1]}, speed, function () {animateDiv();});
                };

            }

            function makeNewPosition() {
                // Get viewport dimensions (remove the dimension of the div)
                var h = 500-80;
                var w = $(window).width() - 80;
                var nh = Math.floor(Math.random() * h);
                var nw = Math.floor(Math.random() * w);
                return [nh, nw];
            }

            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 = .4;
                var speed = Math.ceil(greatest / speedModifier);
                return speed;

            }

＆＃13;

.lemonade {
  width: 100%;
  background: #000;
  height: 500px;
  position: relative;
}

.a {
  height: 10px;
  width: 10px;
  background: #fff;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-fluid lemonade">
	<div class="animatedDivs">
		&nbsp;</div>
</div>

＆＃13;

修改：手动设置链接的相同示例： Fiddle

Answer 2

首先创建您的divs，然后在创建它们之后，您可以将它们定位为它们的动画。您不需要使用JS创建divs（但如果需要，您可以）

HTML：

<div class='animatedDivs'>
  <div class='animate'>...</div>
  <div class='animate'>...</div>
  <div class='animate'>...</div>
  <div class='animate'>...</div>
  <div class='animate'>...</div>
</div>

JS：

$('.animate').forEach(animateDiv);

function animateDiv(div) {
  var newq = makeNewPosition();
  var oldq = div.offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);
  div.animate({ top: newq[0], left: newq[1] }, speed, () => animateDiv(div));
}

这样，每个div每次都会为自己调用一个新位置。

使用唯一的href标签动画多个元素

2 个答案: