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而你已经完成”，因为他们有一个非常复杂的用户界面。我的建议是从它的一个部分（画布或鼠标滚轮事件）开始，并且一次只需要构建一个小块，或者找到插件来构建这些块，然后将它们全部放在一起构建你所追求的东西

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

我怎样才能实现Dipity Timeline UI？

1 个答案: