首頁 > 開發者 > JavaScript
jquery實現圖片隨機排列的方法，jquery實現排列
本文執行個體講述了jquery實現圖片隨機排列的方法。分享給大家供大家參考。具體如下：
該代碼可重新整理後實現圖片隨便排列的jQuery特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title><script type="text/javascript" src="js/jquery.min.js"></script><script type="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("<li class=\"li_"+tarr[i]+"\" style=\"background:url("+pic[i]+")\"> </li>") } } $("#reset span").click(function(){ rond(); for(var i=0; i<index; i++){ $("#c_u li").eq(i).attr("class","").addClass("li_"+tarr[i]); } }); resetPic(); <!--拖動，移位……沒完成，邊界條件沒處理好，刪掉了 -->});</script><style type="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;}#reset span{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_u li{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_u li{cursor:move;}#c_u li.red{border-color:#FF99CC;}#c_u li.move{position:fixed;}#c_u li.abs{position:absolute;}#c_u li img{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><div id="reset"><span>Reset</span>:</div><ul id="c_u"></ul></body></html>
希望本文所述對大家的jQuery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
