<!DOCTYPE html"> <html> <style><!-- body{margin:0;padding:0;}; #mop{position:relative;float:left;border:2px solid #f40;padding-left:300px;} .fac{25px;height:100px;float:left;list-style:none;position:absolute;bottom:100px;} .fac a{display:block;position:absolute;bottom:0;} --></style> <script><!-- window.onload = function(){ var mop = document.getElementById("mop"),frag = document.createDocumentFragment(); (function(){ var li , a; for(var i = 0; i < 25; i++){ li = document.createElement("li");//YI.newLi({className:"fac",id:"f" + i})[0]; li.className = "fac"; li.id = "f" + i; a = document.createElement("a"); li.appendChild(a); frag.appendChild( li ); } mop.appendChild(frag); })(); var facs = document.getElementsByTagName("li"), set = [], steps = []; jOne.each(facs,function(i){ var hsb="rgb(" +rand(0, 200)+","+ rand(50, 250) + ", " + rand(50, 200) + ")",// h = rand(100, 500); set.push(h); jOne.setStyle(this, {height:h + "px",left:i * 25+300}); jOne.setStyle(this.children[0], {background:hsb,"25px",height:h + "px"}); }); var queue = []; var bub = bubble(); bub.sort(set,queue); var dq = createDq(); dq.setDq(queue); dq.run(function(){ var reg = /(\:)|(\^)|(\-)/,arg = arguments[0],ids, elem1, elem2, ret = arg.match(reg); if(ret[1]){ ids = arg.split(/\:/); elem2 = document.getElementById("f" + ids[1]); dq.setCl( elem2.children[0] ); return; } if(ret[2]){ ids = arg.split(/\^/); elem1 = document.getElementById("f" + ids[0] ); if(ids[0] == ids[1]) return; var cl = dq.getCl(); if(elem1.children.length ){ elem1.removeChild(elem1.children[0]); elem1.appendChild(cl); }else{ elem1.appendChild(cl); } return; } if(ret[3]){ ids = arguments[0].split(/\-/); elem1 = document.getElementById("f" + ids[0] ); elem2 = document.getElementById("f" + ids[1] ); if(ids[0] == ids[1]) return; if(elem1.children.length){ elem1.removeChild(elem1.children[0]); elem1.appendChild(elem2.children[0]); }else{ elem1.appendChild(elem2.children[0]); } } }); }; function createDq(){ var dq = [], size = 0, cl; return { setDq:function(queue){ dq = queue; size = queue.length; }, queue:function(fn){ size ++; dq.push(fn); }, dqueue:function(){ size --; return dq.shift(); }, run:function(fn){ var me = this, timer; timer = setInterval(function(){ if(size <= 1){ clearInterval(timer); } fn.call(null,me.dqueue()); },100); }, setCl:function(elem){ cl = elem; }, getCl:function(){ return cl; } } } function bubble(){ var obs = []; return { addOb:function(ob){ obs.push(ob); }, sort:function(arr,q){ var len = arr.length, i = 1, j, t, cl; for(; i < len; i++){ t = arr[i]; q.push("clone:" + i); j = i ; while(j >0 && (t < (arr[j - 1]))){ q.push(j + "-" + (j - 1)); arr[j] = arr[j-1]; j--; } q.push(j + "^" + i); arr[j] = t; } }//sort }//return } var jOne = { each:function(obj,callback){ var i = 0,len = obj.length; for(var value = obj[0]; i < len && callback.call(value,i,value) !==false ; value = obj[ ++i ] ){}; }, setStyle:function(elem, opt){ var o, sty = elem.style; for(var o in opt){ sty[o] = opt[o] } } } function rand(a, b){ var ret = Math.random() * (b - a) + a; return ret >> 0; } //--></script> <ul id="mop"></ul> </html>
运行