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

2020-05-17 06:19:07易采站长站整理

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程序设计有所帮助。