希望有人可以帮助我。我正在尝试创建一个过山车,只要添加新轨道,它就必须下降。我在顶部添加了一个按钮,它有 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,依此类推。
任何帮助都会很甜蜜:)
我正在使用这里的插件