主页 / 网络编程 /

jquery实现图片随机排列的方法

网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了jquery实现图片随机排列的方法,涉及jQuery操作图片的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jquery实现图片随机排列的方法。分享给大家供大家参考。具体如下

该代码可刷新后实现图片随便排列的jQuery特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://.w3./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://.w3./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:;}
#c_u .li_0{:8px; left:8px;}
#c_u .li_1{:8px; left:158px;}
#c_u .li_2{:8px; left:308px;}
#c_u .li_3{:8px; left:458px;}
#c_u .li_4{:8px; left:608px;}
#c_u .li_5{:8px; left:758px;}
#c_u .li_6{:158px; left:8px;}
#c_u .li_7{:158px; left:158px;}
#c_u .li_8{:158px; left:308px;}
#c_u .li_9{:158px; left:458px;}
#c_u .li_10{:158px; left:608px;}
#c_u .li_11{:158px; left:758px;}
#c_u .li_12{:308px; left:8px;}
#c_u .li_13{:308px; left:158px;}
#c_u .li_14{:308px; left:308px;}
#c_u .li_15{:308px; left:458px;}
#c_u .li_16{:308px; left:608px;}
#c_u .li_17{:308px; left:758px;}
#c_u .li_18{:458px; left:8px;}
#c_u .li_19{:458px; left:158px;}
#c_u .li_20{:458px; left:308px;}
#c_u .li_21{:458px; left:458px;}
#c_u .li_22{:458px; left:608px;}
#c_u .li_23{:458px; left:758px;}
</style>
</head>
<body>
<div id="reset"><span>Reset</span>:</div>
<ul id="c_u"></ul>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

上一篇：JS实现随机乱撞彩色圆球特效的方法 下一篇：jquery实现的美女拼图游戏实例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by