Question

我仍然试图掌握JQuery，并希望创建一个本质上非常简单的'游戏'

我们的想法是在背景上放置一堆动态图像，每个图像都链接到一个单独的网页。

但是我很难找到一种方法让每个单独的动态图像都有不同的超链接。

到目前为止这是我的JS ......

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

        function newDiv() {
            var $div = $("<div class='a'><a href='https://soundcloud.com/alcopop/sets/tellison-live-on-the-alcopopacruiser/s-hjXnt'>");
            $(".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;

        }

到目前为止我所做的事情的链接......

https://jsfiddle.net/5vgtx2d3/2/

非常感谢任何帮助。

Answer 1

如果您想通过链接拨打newDiv()，可以执行以下操作：

    function newDiv( newLink ) {
        var $div = "<div class='a'><a href='" + newLink + "'>";
        $(".animatedDivs").append($div);
        animateDiv();
        ....
    }

Answer 2

您可以尝试在newDiv（）函数

中将链接作为参数传递

newDiv('your link');

然后你可以像这样使用它

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();
                });

            };
        }

添加到Javascript创建的元素的不同链接

2 个答案: