0

我试图使用这个插件“http://joelb.me/scrollpath/”制作一个简单的滚动路径，我想做的只是制作一条简单的线，没有旋转、弧线等，我似乎无法理解这是如何工作的，也找不到关于插件的教程！？

我想要一条像...

                __________________
 ______________|

我写了以下没有运气...

任何人都可以看到我做错了什么吗？

.moveTo(400, 50, {name: "one"})
  .lineTo(400, 50, {name: "two"})
  .lineTo(400, 50, {name: "three"})
  .lineTo(400, 50, {name: "four"})
  .lineTo(400, 50, {name: "five"})
  .lineTo(400, 50, {name: "six"})
4

2 回答 2

0

您似乎使用的lineTo思维参数是相对值（即“移至400;50”），但这些是绝对值，因此您的示例会移至400;50并留在那里。

尝试这样的事情：

path
  .moveTo(50,100,{name: 'one'})
  .lineTo(400,100,{name: 'two'})
  .lineTo(400,50,{name: 'three'})
  .lineTo(800,50,{name: 'four'});

此外，当您初始化插件时，drawPath: true作为选项传递，因此您将看到路径是如何实现的：

$(".your-container-element").scrollPath({
  drawPath: true,
});

你可以在这里找到（一些）文档：https ://github.com/JoelBesada/scrollpath

于 2012-12-06T10:02:56.560 回答
0

滚动路径的作用是将给定的 (x,y) 坐标带到屏幕的中心。

例如

.moveTo(50,100,{name='a'})

将 (50,100) 移动到屏幕的中心。

所以要使用它，你必须像这样使用绝对定位：

例如。格 1 =(50,100) 格 2= (100,100) 格 3= (150,100)

要处理这个你必须

.moveTo(50,100,{name: 'div1'});
.moveTo(100,100,{name: 'div2'});
.moveTo(150,100,{name: 'div3'});

请记住，(50,100) 现在是中心，因此如果您将 div 恰好放置在 (50,100) 它将占据右下角的空间。

而是将整个 div 围绕 (50,100)

于 2012-12-10T11:03:42.470 回答