今天博主想要和大家分享如何實(shí)現(xiàn)動(dòng)態(tài)圖，經(jīng)常在其他博主的文章中可以看到各式各樣的動(dòng)圖，搜索一下“網(wǎng)上冒泡排序的動(dòng)圖怎么制作出來”可以看到，很迷，全是告訴冒泡排序的原理，以及動(dòng)圖解析，并沒有告知?jiǎng)訄D是如何制作的：

---

結(jié)合博主目前正在學(xué)習(xí)的前端技術(shù)，博主想到了一個(gè)辦法可以去制作排序的動(dòng)圖解析過程，雖然不是最好的辦法，但相信可以給大家提供一些思路，可以在自己擅長的領(lǐng)域，使用自己的方式制作出來。

---

首先就是搭建出來頁面中所有的柱形圖，HTML和CSS代碼如下

代碼示例

HTML代碼：

<!-- 搭建基本的柱形圖 --><!-- 最外面包裹全部柱形的盒子box --><div class="box"><!-- 每一個(gè)柱形內(nèi)包含一個(gè)數(shù)字 --><span class="list_1">6</span><span class="list_2">4</span><span class="list_3">9</span><span class="list_4">5</span><span class="list_5">2</span><span class="list_6">7</span></div>

CSS代碼：

<style>.box {position: relative;height: 200px;/* 給外面最大的盒子一個(gè)背景色 */background-color: #000;}.list_1,.list_2,.list_3,.list_4,.list_5,.list_6 {/* 給所有小的柱形圖定位 */position: absolute;bottom: 25px;/* 讓文字居中顯示 */text-align: center;/* 給柱形圖設(shè)置形狀 */display: block;width: 40px;background-color: aquamarine;}.list_1 {/* 給每個(gè)柱形圖定位到對應(yīng)的位置，并且給它們不同的高度用以區(qū)分 */left: 10px;height: 60px;}.list_2 {/* 給每個(gè)柱形圖定位到對應(yīng)的位置，并且給它們不同的高度用以區(qū)分 */left: 60px;height: 40px;}.list_3 {/* 給每個(gè)柱形圖定位到對應(yīng)的位置，并且給它們不同的高度用以區(qū)分 */left: 110px;height: 90px;}.list_4 {/* 給每個(gè)柱形圖定位到對應(yīng)的位置，并且給它們不同的高度用以區(qū)分 */left: 160px;height: 50px;}.list_5 {/* 給每個(gè)柱形圖定位到對應(yīng)的位置，并且給它們不同的高度用以區(qū)分 */left: 210px;height: 20px;}.list_6 {/* 給每個(gè)柱形圖定位到對應(yīng)的位置，并且給它們不同的高度用以區(qū)分 */left: 260px;height: 70px;}</style>

最終會(huì)出來這樣子一個(gè)效果：

?基本的形狀出來了，接下來就可以進(jìn)行排序，排序動(dòng)圖這里例子是采用冒泡排序去展示

代碼示例

script代碼：

<!-- 引入jQuery --><script src="./js/jquery.min.js"></script> <!-- 定時(shí)器制作排序動(dòng)畫 --><script>$(function() {// console.log($('.box'));// 第一輪冒泡，相鄰的兩個(gè)數(shù)字比較，數(shù)字較大的往右邊移動(dòng)// 4、6比較//500毫秒后執(zhí)行變色操作setTimeout(function() {$('.list_1').css('background', '#fff') //4變色$('.list_2').css('background', '#fff') //6變色}, 500)//1000毫秒后執(zhí)行位置比較移動(dòng)setTimeout(function() {$('.list_1').stop().animate({left: 60 //6移動(dòng)到4的位置}, 100)$('.list_2').stop().animate({left: 10 //4移動(dòng)到6的位置}, 100)}, 1000)//6、9比較//1500毫秒后執(zhí)行變色操作setTimeout(function() {$('.list_2').css('background', '') //4褪色$('.list_3').css('background', '#fff') //9變色}, 1500)//2000毫秒后執(zhí)行位置比較移動(dòng)setTimeout(function() {$('.list_1').stop().animate({left: 60 //6不換位置}, 100)$('.list_3').stop().animate({left: 110 //9不換位置}, 100)}, 2000)//9、5比較//2500毫秒后執(zhí)行變色操作setTimeout(function() {$('.list_1').css('background', '') //6褪色$('.list_4').css('background', '#fff') //5變色}, 2500)//3000毫秒后執(zhí)行位置比較移動(dòng)setTimeout(function() {$('.list_3').stop().animate({left: 160 //9移動(dòng)到5的位置}, 100)$('.list_4').stop().animate({left: 110 //5移動(dòng)到9的位置}, 100)}, 3000)//9、2比較//3500毫秒后執(zhí)行變色操作setTimeout(function() {$('.list_4').css('background', '') //5褪色$('.list_5').css('background', '#fff') //2變色}, 3500)//4000毫秒后執(zhí)行位置比較移動(dòng)setTimeout(function() {$('.list_3').stop().animate({left: 210 //9移動(dòng)到2的位置}, 100)$('.list_5').stop().animate({left: 160 //2移動(dòng)到9的位置}, 100)}, 4000)//9、7比較//4500毫秒后執(zhí)行變色操作setTimeout(function() {$('.list_5').css('background', '') //2褪色$('.list_6').css('background', '#fff') //7變色}, 4500)//5000毫秒后執(zhí)行位置比較移動(dòng)setTimeout(function() {$('.list_3').stop().animate({left: 260 //9移動(dòng)到7的位置}, 100)$('.list_6').stop().animate({left: 210 //7移動(dòng)到9的位置}, 100)}, 5000)//已排好序的9//5500毫秒后執(zhí)行變色操作確定9的位置不變了setTimeout(function() {$('.list_6').css('background', '') //2褪色$('.list_3').css('background', 'red') //9變色}, 5500)})</script>

最終效果動(dòng)圖展示：

以上博主就只是展示一輪排序，后面的排序過程，通過學(xué)習(xí)其中的原理也就知道是如何制作的了，收藏起來回去研究研究，相信你可以做出來自己想要實(shí)現(xiàn)的動(dòng)圖動(dòng)畫的

---

總結(jié)

以上是生活随笔為你收集整理的网上经常看到的冒泡排序的动图如何制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。