<script src='jquery-1.4.4.js'></script>
<style type="text/css">
li{background:red; margin:3px; height:4px;}
</style>
<script type="text/javascript">
var a = [],num,liobj;
$(function(){
for(var i=0;i<100;i++){
num = Math.floor(Math.random()*1000);
$("#con").append($("<li style='width:"+ num +"px'></li>"));
}
$("input").click(function(){
start();
});
});
function start(){
var tem,i=0,j=100;
var b =setInterval(function(){
$("li").css("background","red");
$("li").eq(i).css("background","green");
$("li").eq(j).css("background","yellow");
if(j<0){
clearInterval(b);
}else{
if(i>j){
i=0;
j--;
}else{
if($("li:eq("+i+")").width()<$("li:eq("+(i+1)+")").width()){
var temp;
temp = $("li:eq("+(i+1)+")").width();
$("li:eq("+(i+1)+")").width($("li:eq("+i+")").width());
$("li:eq("+i+")").width(temp);
}
i++;
}
}
},10);
}
</script>
<body>
<ul id="con">
</ul>
<input type="button" value='开始' />
</body>
<style type="text/css">
li{background:red; margin:3px; height:4px;}
</style>
<script type="text/javascript">
var a = [],num,liobj;
$(function(){
for(var i=0;i<100;i++){
num = Math.floor(Math.random()*1000);
$("#con").append($("<li style='width:"+ num +"px'></li>"));
}
$("input").click(function(){
start();
});
});
function start(){
var tem,i=0,j=100;
var b =setInterval(function(){
$("li").css("background","red");
$("li").eq(i).css("background","green");
$("li").eq(j).css("background","yellow");
if(j<0){
clearInterval(b);
}else{
if(i>j){
i=0;
j--;
}else{
if($("li:eq("+i+")").width()<$("li:eq("+(i+1)+")").width()){
var temp;
temp = $("li:eq("+(i+1)+")").width();
$("li:eq("+(i+1)+")").width($("li:eq("+i+")").width());
$("li:eq("+i+")").width(temp);
}
i++;
}
}
},10);
}
</script>
<body>
<ul id="con">
</ul>
<input type="button" value='开始' />
</body>