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 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
js面向对象的写法
Feb 19 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
微信小程序实现横向增长表格的方法
Jul 24 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
es6函数之rest参数用法实例分析
Apr 18 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
js+html获取系统当前时间
2017/11/10 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python获取网页状态码示例
2014/03/30 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
基于python socketserver框架全面解析
2017/09/21 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python爬虫教程知识点总结
2020/10/19 Python
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
植树节标语
2014/06/27 职场文书
2014年人事科工作总结
2014/11/19 职场文书
商场广播稿范文
2015/08/19 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
PyTorch device与cuda.device用法
2022/04/03 Python