[js

前段时间偶然看到有个日本人很早之前写了js的多种排序程序,使用js+html实现的排序动画,效果非常好。


受此启发,我决定写几个js的算法动画,第一个就用汉诺塔。


演示地址:http://tut.ap01.aws.af.cm/visual/hanoi.htm


代码:http://tut.ap01.aws.af.cm/js/hanoi.js


下图为演示界面:




在写界面的时候,才真正理解css中position的用法,之前知道含义,但是不知道搭配的用法。


position用法:外层使用relative,内层使用absolute,这样内层的absolute对象都可以使用top,left和外层进行相对定位。


另外在这个程序里面,实现了一点,就是顺序动画,这一点很重要(同时,因为我对jquery的顺序不熟悉,希望有人可以告诉我怎么用jquery实现)。

1.jquery中,通常都是针对同一个对象,进行不同的动画。


2.针对不同对象的动画会在同一时间开始执行。


3.针对不同对象的动画,可以用jquery的完成函数实现。


上面第3点,在对象很少,执行步骤很少的时候(大概<4可以接受)可以考虑,但是如果是大量的动画,那就很不合适了。


我的解决办法是,有一个对象来记录动画状态,然后使用一个数组来记录全部的状态。


最后使用setTimeout来定期从数组执行动画。


使用这种方法实现了盘子的顺序移动,移动过程中需要计算盘子的运动路径。


如果两个盘子挨着,不需要考虑中间的位置,如果两个盘子隔着一个,就需要考虑中间的位置。


通过判断高度,最后确定盘子的路径,盘子有左移、右移、上移、下移四种操作,每条路径根据具体情况分解为这四种操作。


关于上面jquery的顺序移动,如果没有jquery自身可以实现的方法,我就考虑如何写个插件来实现这个功能。

原文地址:https://www.cnblogs.com/james1207/p/3292208.html