• [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自身可以实现的方法,我就考虑如何写个插件来实现这个功能。

  • 相关阅读:
    2017-10-11seowhy记录
    2017.8.23创业项目方向
    西安项目分析
    创业方法
    做seowhy官网需要三个人
    2017.8.2 高级长尾编辑技巧
    Golang 任务队列策略 -- 读《JOB QUEUES IN GO》
    Go 到底有没有引用传参(对比 C++ )
    使用xorm工具,根据数据库自动生成 go 代码
    golang的Channel
  • 原文地址:https://www.cnblogs.com/james1207/p/3292208.html
Copyright © 2020-2023  润新知