资讯专栏INFORMATION COLUMN

【动画】JQuery实现冒泡排序算法动画演示

lovXin / 1196人阅读

摘要:为了更好的理解其基本的思想,毛三胖利用实现了冒泡排序的动画演示并计划陆续实现其它排序算法的动画演示。现将冒泡排序实现的基本思路和代码分享如下动画演示演示地址冒泡排序动画演示秒演示动画前秒图,图片大小。

1 前言

冒泡排序是大家最熟悉的算法,也是最简单的排序算法,因其排序过程很象气泡逐渐向上漂浮而得名。为了更好的理解其基本的思想,毛三胖利用JQuery实现了冒泡排序的动画演示,并计划陆续实现其它排序算法的动画演示。现将冒泡排序JQuery实现的基本思路和代码分享如下:

2 动画演示 2.1 演示地址

冒泡排序动画演示

2.2 30秒GIF

演示动画前30秒gif图,图片大小1.60M。

3 动画设计及实现

因为JavaScript中并不存在类似sleep()这样的函数,所以只能利用setInterval()来实现动画效果。因此不能利用算法的双重循环实现方式,只能算法过程拟合到一个时间轴上来实现动画效果。

3.1 Html代码
  • 97
  • 72
  • 68
  • 29
  • 51
  • 45
  • 88
  • 32
  • 41
  • 12
3.2 核心JS代码

每隔一秒执行一次协作,完成排序后清除interval

function go() {
    //设置当前相比较两元素样式
    setCss();
    interval = setInterval(function () {
        //times趟数,达到数组长度-1,结束循环
        if(times < count -1) {
            //交换函数,如必要实现两元素交换
            var change = exchange();
            //如不交换,指针向前
            if (!change) {
                current++;
                next++;
                //内部循环次数逐渐减少
                if (current == count - 1 - times) {
                    times++;
                    current = 0;
                    next = 1;
                    //保留每一趟的历史数据
                    drawData();
                }
                setCss();
            }
        } else {
            //排序完成,清理
            $lis.removeClass("active");
            clearInterval(interval);
        }
    },1000);
}
3.3 交换动效

交换的动态效果利用了github的JQuery的swap,地址:Github jquery.swap.js。

源代码如下:

(function( $ ) {
    $.fn.swap = function(a, b) {
        t = this
        if(t.length == 1 && a.length == 1 && b == undefined ){
            return _swap(t, a);
        }else if(t.length > 1 && typeof(a) == "number" && typeof(b) == "number" ){
            _swap(t[a], t[b])
            return t;
        }else{
            $.error( "Argument Error!" );
        }
    };

    function _swap(a, b){
        var from = $(a),
            dest = $(b),
            from_pos = from.offset(),
            dest_pos = dest.offset(),
            from_clone = from.clone(),
            dest_clone = dest.clone(),
            total_route_vertical   = dest_pos.top + dest.height() - from_pos.top,
            route_from_vertical    = 0,
            route_dest_vertical    = 0,
            total_route_horizontal = dest_pos.left + dest.width() - from_pos.left,
            route_from_horizontal  = 0,
            route_dest_horizontal  = 0

        from.css("opacity", 0);
        dest.css("opacity", 0);

        from_clone.insertAfter(from).css({position: "absolute", width: from.outerWidth(), height: from.outerHeight()}).offset(from_pos).css("z-index", "999")
        dest_clone.insertAfter(dest).css({position: "absolute", width: dest.outerWidth(), height: dest.outerHeight()}).offset(dest_pos).css("z-index", "999")

        if(from_pos.top != dest_pos.top)
            route_from_vertical = total_route_vertical - from.height()
        route_dest_vertical = total_route_vertical - dest.height()
        if(from_pos.left != dest_pos.left)
            route_from_horizontal = total_route_horizontal - from.width()
        route_dest_horizontal = total_route_horizontal - dest.width()

        from_clone.animate({
                top: "+=" + route_from_vertical + "px",
                left: "+=" + route_from_horizontal + "px",
            },
            "slow",
            function(){
                dest.insertBefore(this).css("opacity", 1);
                $(this).remove();
            });

        dest_clone.animate({
                top: "-=" + route_dest_vertical + "px",
                left: "-=" + route_dest_horizontal + "px"
            },
            "slow",
            function(){
                from.insertBefore(this).css("opacity", 1);
                $(this).remove();
            });

        return from;
    }
})( jQuery );
4 结语

目前,只完成了冒泡排序和直接插入排序两个算法的动画演示,其它的慢慢来完成吧。要学习完整的源代码可直接源文获取。

冒泡排序动画

插入排序动画

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83165.html

相关文章

  • JavaScript 数据结构与算法之美 - 十大经典排序算法汇总

    摘要:笔者写的数据结构与算法之美系列用的语言是,旨在入门数据结构与算法和方便以后复习。这应该是目前较为简单的十大经典排序算法的文章讲解了吧。比如原本在的前面,而,排序之后,在的后面十大经典排序算法冒泡排序思想冒泡排序只会操作相邻的两个数据。 showImg(https://segmentfault.com/img/bVbvHet); 1. 前言 算法为王。想学好前端,先练好内功,内功不行,就...

    zsy888 评论0 收藏0
  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    madthumb 评论0 收藏0
  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    Labradors 评论0 收藏0
  • 前端动画演绎排序算法

    摘要:寻找从当前位置到右边的最矮球员将最矮球员与当前位置的球员交换向右移动一个位置点击运行案例插入排序在大多数情况下,这是基础排序方法中的最佳方法。点击运行案例合并排序合并排序算法的核心是两个已经排序的数组的合并和递归。 文章包含多个可交互案例,可通过博客原文实时查看案例 showImg(https://terry-su.github.io/BlogCDN/images/simpson-ev...

    goji 评论0 收藏0
  • 前端面试题大集合:来自真实大厂的532道面试题(只有题,没有答案)

    答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比,两者中间件的原理,koa捕获异常多种情...

    Kerr1Gan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<