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


Posted in Javascript onMay 04, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
javascript的console.log()用法小结
May 31 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
jquery实现的美女拼图游戏实例
May 04 #Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 #Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 #Javascript
jQuery消息提示框插件Tipso
May 04 #Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 #Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
jQuery插件jPaginate实现无刷新分页
May 04 #Javascript
You might like
PHP 类相关函数的使用详解
2013/05/10 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
domReady的实现案例
2016/11/23 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
Python线程的两种编程方式
2015/04/14 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Django实现内容缓存实例方法
2020/06/30 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
日语专业个人求职信范文
2014/02/02 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
暑假打工感想
2015/08/07 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python