Question

希望有人可以帮助我。我正在尝试创造一个过山车，只要添加一个新的轨道就必须下降。我在顶部添加了一个按钮，它有2条路径。这些路径必须一次生成一个，但彼此相同。到目前为止我的代码：

$(window).load(function(){
     $(document).ready();
            function pathOne(){
                var roadDiv = document.createElement("div");
                var roadImage = document.createElement("div");

                roadDiv.className = "road1";

                roadImage.className = "roadImage1"

                $('.wrapper').append(roadDiv);
                $(roadDiv).append(roadImage);

                $.fn.scrollPath("getPath")
                .moveTo(340, 50, {})
                .lineTo(340, 300, {rotate: .1})
                .lineTo(340, 300, {rotate: .7})
                .lineTo(620, 600, {})
                .rotate(0, {})
                .lineTo(620, 820, {})
                .rotate(- .8, {})
                .lineTo(160, 1280, {})
                .rotate(0, {})
                .lineTo(160, 1484, {})
            }

            function pathTwo(){
                var roadDiv = document.createElement("div");

                var roadImage = document.createElement("div");

                roadDiv.className = "road2";
                roadImage.className = "roadImage2"

                $('.wrapper').append(roadDiv);
                $(roadDiv).append(roadImage);

                $.fn.scrollPath("getPath")
                //.moveTo(160, 1580, {})
                .lineTo(160, 1580, {})
                .rotate(-.8, {})
                .lineTo(-80, 1820, {})
                .rotate(0, {})
                .lineTo(-80, 2190, {})
                .rotate(.8, {})
                .lineTo(180, 2460, {})
                .rotate(0, {})
                .lineTo(180, 2680, {})
                .rotate(-.8, {})
                .lineTo(50, 2820, {})
                .rotate(0, {})
                .lineTo(50, 2918, {})
            }

            $(".addRow").click(function(){

                if ($(".wrapper").is(':empty')) {
                    pathOne();
                    //alert("added pathOne");
                }
                else if ( $('.road1').length > 0 ){
                    pathTwo();
                    alert("added pathTwo");
                    return;
                }
                $(".wrapper").scrollPath({drawPath: false, wrapAround: false, scrollBar: true});
            });

            function ordinal(num) {
                return num + (
                    (num % 10 == 1 && num % 100 != 11) ? 'st' :
                    (num % 10 == 2 && num % 100 != 12) ? 'nd' :
                    (num % 10 == 3 && num % 100 != 13) ? 'rd' : 'th'
                );
            }
    });

这里可以看到演示： rollercoaster track

我的问题是，当我添加新曲目时，它总是将其添加到其他曲目下方，并在曲目1（pathOne）和曲目2（pathTwo）之间切换。从轨道1开始，按下按钮添加轨道2，再次按下它应该在轨道2下方添加轨道1，依此类推。

任何帮助都是甜蜜的：）

我正在使用here

中的插件

按下按钮时添加无限滚动路径

0 个答案: