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

稿源：互联网 2018-09-03 01:30:50 点击： 10218 撤稿纠错

刷新后实现图片随便排列的JQUERY特效代码分享 demo by js.alixixi.com

以下讨论的是和jquery 随机排列相关的通过jquery实现图片随机排列排序的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 var arr = [];
 var tarr = [];
 var pic = [];
 pic[0] = "http://www.alixixi.cn/images/index/t1.gif";
 pic[1] = "http://www.alixixi.cn/images/index/t2.gif";
 pic[2] = "http://www.alixixi.cn/images/index/t3.gif";
 pic[3] = "http://www.alixixi.cn/images/index/t4.gif";
 pic[4] = "http://www.alixixi.cn/images/index/t5.gif";
 pic[5] = "http://www.alixixi.cn/images/index/t6.gif";
 pic[6] = "http://www.alixixi.cn/images/index/t7.gif";
 pic[7] = "http://www.alixixi.cn/images/index/t8.gif";
 pic[8] = "http://www.alixixi.cn/images/index/t9.gif";
 pic[9] = "http://www.alixixi.cn/images/index/t10.gif";
 pic[10] = "http://www.alixixi.cn/images/index/t11.gif";
 pic[11] = "http://www.alixixi.cn/images/index/t12.gif";
 pic[12] = "http://www.alixixi.cn/images/index/t13.gif";
 pic[13] = "http://www.alixixi.cn/images/index/t14.gif";
 pic[14] = "http://www.alixixi.cn/images/index/t15.gif";
 pic[15] = "http://www.alixixi.cn/images/index/t1.gif";
 pic[16] = "http://www.alixixi.cn/images/index/t2.gif";
 pic[17] = "http://www.alixixi.cn/images/index/t3.gif";
 pic[18] = "http://www.alixixi.cn/images/index/t4.gif";
 pic[19] = "http://www.alixixi.cn/images/index/t5.gif";
 pic[20] = "http://www.alixixi.cn/images/index/t6.gif";
 pic[21] = "http://www.alixixi.cn/images/index/t7.gif";
 pic[22] = "http://www.alixixi.cn/images/index/t8.gif";
 pic[23] = "http://www.alixixi.cn/images/index/t8.gif";
 var index = 24;
 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++){
   $("#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实现图片随机排列排序的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090392028.shtml方便下次再访问哦。

·上一篇： JQUERY+CSS3实现简单的瀑布流模型排列展示
·下一篇： 纯CSS实现的鼠标悬停时放大且加大图片、图层的高度并且显示到最前的特效

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

文章分类LIST >>返回首页

最新游戏

最新新闻