通过jquery实现图片随机排列特效代码

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;

 function rond(){

  for(var i=0; i

   arr[i] = i;

  }

  var j = index;

  for(var i=0; i

   var t = Math.floor(Math.random()*j);

   j--;

   tarr[i] = arr.splice(t,1);

  }

 }

 function resetPic(){

  rond();

  for(var i=0; i

   $("#c_u").append(" ")

  }

 }

 $("#reset span").click(function(){

  rond();

  for(var i=0; i

   $("#c_uli").eq(i).attr("class","").addClass("li_"+tarr[i]);

  }

 });

 resetPic();

 

 

});

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;}

郑州悦美整形美容医院 www.ymzxyy.cn  郑州展览公司  www.zongchi.net

Reset: