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 相关文章推荐
jQuery中last()方法用法实例
Jan 06 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
原生js+ajax分页组件
Jan 30 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 和 MySQL 基础教程(四)
2006/10/09 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JS实现随机点名器
2020/04/12 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python创建和使用字典实例详解
2013/11/01 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python中is与==判断的区别
2017/03/28 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
python基于openpyxl生成excel文件
2020/12/23 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
运动会广播稿500字
2014/01/28 职场文书
简历里的自我评价
2014/01/31 职场文书
趣味比赛活动方案
2014/02/15 职场文书
小学家长通知书评语
2014/12/31 职场文书
学校端午节活动总结
2015/02/11 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers