jQuery，沿弧线动画

Question

我真的很难找到一个合适的资源来帮助我发展我需要的东西。我使用过Google，Stack溢出甚至搜索过Reddit。正如我之前提到的，我是jQuery的新手，所以我并没有完全理解所有的术语，也没有方法和最佳实践。

当我单击按钮时，我需要使对象（图像）以曲线运动移动，然后当我再次单击按钮时也能够向后移动，因此图像将从点1移动到点2，并且然后回到原来的位置。此曲线运动应位于浏览器窗口的底部并具有响应性。

以下是曲线的粗略示例：

最终，当我点击按钮时会有一些图像移动但是现在我只对一个工作感到满意！

有人可以指点我一个有用的资源/教程/插件来帮助我实现这个目标吗？

如果它有帮助，屏幕底部的图像将是一个全宽度的地球仪，对象将是天空中的物品在它周围移动（只是因为这使得你们中的任何人都记得在线实现这一点）< / p>

Answer 1

使用以下插件并按照代码操作 [https://github.com/Mottie/Pathslider][1] 运行此代码，它将显示一个弧

<style>

#slider {


 background : #eee url();
  width      : 316px;
  height     : 91px;

}

<script>
jQuery(function($){
  $("#slider").pathslider({
    points     : [ 8,83,75,-100,-75,-100,308,83 ],
    value      : 50,
    rotateGrip : true,
    tolerance  : 3,
    range      : 30,
    curve      : { width:4, color:"#333", cap:"round" }
  });
});
</script>

您也可以访问其网站

Slider