我如何实现 Dipity Timeline UI？

Question

如果您还没有听说过 Dipity，它是一个网络应用程序，允许人们在浏览器上创建时间线。这是时间线的示例： http://www.dipity.com/StevePro/Steve-Jobs- Life-and-Career/

我如何实现您在上面链接中看到的时间线功能？更具体地说，在没有 Flash 的情况下，如何实现缩放、动量滚动和其他 UI 元素？

根据您的专业知识，如果我想制作一个可以像上面看到的那样放大/缩小、滚动和全屏显示的画布，我应该考虑哪些库或项目？

预先感谢您的帮助。

Answer 1

首先，您可以查看源代码并看到他们使用了大量 jQuery 和 jQuery 插件：

<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityAccount.js.v8972.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-1.4.2.min.js.v8078.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipity.js.v9015.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityCookie.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityDialog.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipitySearch.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-ui-1.8.custom.min.js.v8078.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/swfupload.js.v7257.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/functions.js.v8803.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/carousel.js.v8453.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/typewatch.js.v7961.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.mousewheel.min.js.v8346.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.autogrow-textarea.js.v8871.js"></script>
<script type="text/javascript" src="http://www.dipity.com/js/widget.js?key=8307484b5ef1207f7f202fe890a8e14d&sig=5d284fd444ffec2ff3b59dbe2d3d8167"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityForms.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityEvent.js.v8979.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityTopic.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/eventdetail.js.v8490.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/tl_below.js.v6370.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/ajaxForm.js.v8875.js"></script>

您不会得到任何“执行 A、B 和 C 就完成了”的信息，因为它们有一个 <那里的用户界面非常复杂。我的建议是从其中的一个部分（画布或鼠标滚轮事件）开始，一次构建一小部分，或者找到插件来构建这些部分，然后将它们全部放在一起来构建你想要的东西。

几乎所有软件的构建方式都是一样的。您可以使用自己的构建块，并将它们堆叠起来以创建您自己的独特作品。