jquery realizes the method of image random arrangement
- 2020-06-07 03:57:56
- OfStack
An example of jquery is presented in this paper. Share to everybody for everybody reference. The details are as follows:
This code can be refreshed to achieve the jQuery effect of arbitrary arrangement of images
<!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 = [];
<!-- Save picture address, because of the local picture, so uploaded to baidu space -->
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;
<!-- Number of images, customizable, but at the same time li And the number of images 1 sample -->
function rond(){
for(var i=0; i<index; i++){<!-- Generate the array and save the serial number -->
arr[i] = i;
}
var j = index;
for(var i=0; i<index; i++){<!-- Random number group, picture random -->
var t = Math.floor(Math.random()*j);
j--;
tarr[i] = arr.splice(t,1);
}
}
function resetPic(){
rond();
for(var i=0; i<index; i++){<!-- Generate images with random locations --><!--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();
<!-- Drag, shift... I didn't do it. I didn't deal with the boundary conditions. I got rid of them -->
});
</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>I hope this article has been helpful for your jQuery programming.