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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
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短址转换实现方法
2015/02/25 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Python httplib模块使用实例
2015/04/11 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python实现文本界面网络聊天室
2018/12/12 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
战略合作协议书范本
2014/04/18 职场文书
群教班子对照检查材料
2014/08/26 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
商场营业员岗位职责
2015/04/14 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Python实战之OpenCV实现猫脸检测
2021/06/26 Python