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 验证日期的函数
Mar 18 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
splice slice区别
2006/10/09 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python 字段拆分详解
2019/12/17 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
盛大二次面试题
2016/11/18 面试题
营销专业应届生求职信
2013/11/26 职场文书
初中生自我鉴定
2014/02/04 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
保护环境倡议书
2014/04/14 职场文书
高中教师考核方案
2014/05/18 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
公司管理建议书
2015/09/14 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书