1

希望有人可以帮助我。我正在尝试创建一个过山车,只要添加新轨道,它就必须下降。我在顶部添加了一个按钮,它有 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'
                );
            }
    });

演示可以在这里看到: 过山车轨道

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

任何帮助都会很甜蜜:)

我正在使用这里的插件

4

0 回答 0