jquery实现图片随机排列的方法
本文实例讲述了jquery实现图片随机排列的方法。分享给大家供大家参考。具体如下：
该代码可刷新后实现图片随便排列的jQuery特效
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>test</title>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
jQuery(document).ready(function($){
vararr=[];
vartarr=[];
varpic=[];
<!--保存图片地址，因为本地图片原因，所以上传到了百度空间-->
pic[0]="images/index/t1.gif";
pic[1]="images/index/t2.gif";
pic[2]="images/index/t3.gif";
pic[3]="images/index/t4.gif";
pic[4]="images/index/t5.gif";
pic[5]="images/index/t6.gif";
pic[6]="images/index/t7.gif";
pic[7]="images/index/t8.gif";
pic[8]="images/index/t9.gif";
pic[9]="images/index/t10.gif";
pic[10]="images/index/t11.gif";
pic[11]="images/index/t12.gif";
pic[12]="images/index/t13.gif";
pic[13]="images/index/t14.gif";
pic[14]="images/index/t15.gif";
pic[15]="images/index/t1.gif";
pic[16]="images/index/t2.gif";
pic[17]="images/index/t3.gif";
pic[18]="images/index/t4.gif";
pic[19]="images/index/t5.gif";
pic[20]="images/index/t6.gif";
pic[21]="images/index/t7.gif";
pic[22]="images/index/t8.gif";
pic[23]="images/index/t8.gif";
varindex=24;
<!--图片个数，可自定义，但是同时li的个数也要与图片个数一样-->
functionrond(){
for(vari=0;i<index;i++){<!--生成数组，保存序号-->
arr[i]=i;
}
varj=index;
for(vari=0;i<index;i++){<!--随机数组，图片随机-->
vart=Math.floor(Math.random()*j);
j--;
tarr[i]=arr.splice(t,1);
}
}
functionresetPic(){
rond();
for(vari=0;i<index;i++){<!--生成图片，位置随机--><!--016/images/"+i+".jpg-->
$("#c_u").append("<liclass=\"li_"+tarr[i]+"\"style=\"background:url("+pic[i]+")\"></li>")
}
}
$("#resetspan").click(function(){
rond();
for(vari=0;i<index;i++){
$("#c_uli").eq(i).attr("class","").addClass("li_"+tarr[i]);
}
});
resetPic();
<!--拖动，移位……没完成，边界条件没处理好，删掉了-->
});
</script>
<styletype="text/css">
body{
background:#CCCCCC;padding:0;margin:0;
}
#reset{
width:898px;height:36px;margin:0auto;
position:relative;color:#FFFFFF;
font-size:28px;line-height:36px;
font-weight:bold;
}
#resetspan{
cursor:pointer;text-decoration:underline;
}
#c_u{
width:898px;height:596px;
margin:0auto;position:relative;
list-style:none;padding:8px;
border:4pxsolid#FFFFFF;
}
#c_uli{
margin:8px;border:4.5pxsolid#FFFFFF;
width:125px;height:125px;
position:absolute;padding:0;
transition:all.5sease-out0s;
-webkit-transition:all.5sease-out0s;
-o-transition:all.5sease-out0s;
}
#c_uli{cursor:move;}
#c_uli.red{border-color:#FF99CC;}
#c_uli.move{position:fixed;}
#c_uli.abs{position:absolute;}
#c_uliimg{vertical-align:top;}
#c_u.li_0{top:8px;left:8px;}
#c_u.li_1{top:8px;left:158px;}
#c_u.li_2{top:8px;left:308px;}
#c_u.li_3{top:8px;left:458px;}
#c_u.li_4{top:8px;left:608px;}
#c_u.li_5{top:8px;left:758px;}
#c_u.li_6{top:158px;left:8px;}
#c_u.li_7{top:158px;left:158px;}
#c_u.li_8{top:158px;left:308px;}
#c_u.li_9{top:158px;left:458px;}
#c_u.li_10{top:158px;left:608px;}
#c_u.li_11{top:158px;left:758px;}
#c_u.li_12{top:308px;left:8px;}
#c_u.li_13{top:308px;left:158px;}
#c_u.li_14{top:308px;left:308px;}
#c_u.li_15{top:308px;left:458px;}
#c_u.li_16{top:308px;left:608px;}
#c_u.li_17{top:308px;left:758px;}
#c_u.li_18{top:458px;left:8px;}
#c_u.li_19{top:458px;left:158px;}
#c_u.li_20{top:458px;left:308px;}
#c_u.li_21{top:458px;left:458px;}
#c_u.li_22{top:458px;left:608px;}
#c_u.li_23{top:458px;left:758px;}
</style>
</head>
<body>
<divid="reset"><span>Reset</span>:</div>
<ulid="c_u"></ul>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。