<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>通过jquery实现图片随机排列特效代码
</title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<scripttype="text/javascript">
jQuery(document).ready(function($){
var arr = [];
var tarr = [];
var pic = [];<!--保存图片地址,因为本地图片原因,所以上传到了百度空间 -->
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";
var index = 24;<!--图片个数,可自定义,但是同时li的个数也要与图片个数一样 -->
function rond(){
for(var i=0; i<index; i++){<!--生成数组,保存序号 -->
arr[i] = i;
}
var j = index;
for(var i=0; i<index; i++){<!--随机数组,图片随机 -->
var t = Math.floor(Math.random()*j);
j--;
tarr[i] = arr.splice(t,1);
}
}
function resetPic(){
rond();
for(var i=0; i<index; i++){<!--生成图片,位置随机--><!--016/images/"+i+".jpg -->
$("#c_u").append("<liclass=\"li_"+tarr[i]+"\"style=\"background:url("+pic[i]+")\"> </li>")
}
}
$("#reset span").click(function(){
rond();
for(var i=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:0 auto; 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:0 auto; position:relative; list-style:none; padding:8px;border:4px solid #FFFFFF;}
#c_uli{margin:8px; border:4.5px solid #FFFFFF; width:125px; height:125px; position:absolute;padding:0; transition:all .5s ease-out 0s; -
webkit-transition:all.5s ease-out 0s; -o-transition:all .5s ease-out 0s;}
#c_uli{cursor:move;}
#c_uli.red{border-color:#FF99CC;}
#c_uli.move{position:fixed;}
#c_uli.abs{position:absolute;}
#c_u liimg{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>
郑州悦美整形美容医院 www.ymzxyy.cn 郑州展览公司 www.zongchi.net
<body>
<divid="reset"><span>Reset</span>:</div>
<ulid="c_u"></ul>
</body>
</html>