通过jquery实现图片随机排列特效代码

最新推荐文章于 2021-06-09 10:19:11 发布
最新推荐文章于 2021-06-09 10:19:11 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery


<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>通过jquery实现图片随机排列特效代码

</title>

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<scripttype="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("<liclass=\"li_"+tarr[i]+"\"style=\"background:url("+pic[i]+")\"> </li>")

  }

 }

 $("#reset span").click(function(){

  rond();

  for(var i=0; i<index; i++){

   $("#c_uli").eq(i).attr("class","").addClass("li_"+tarr[i]);

  }

 });

 resetPic();

 <!--拖动，移位……没完成，边界条件没处理好，删掉了 -->

 

});

</script>

<styletype="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;}

#resetspan{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_uli{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_uli{cursor:move;}

#c_uli.red{border-color:#FF99CC;}

#c_uli.move{position:fixed;}

#c_uli.abs{position:absolute;}

#c_u liimg{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>

郑州悦美整形美容医院 www.ymzxyy.cn  郑州展览公司  www.zongchi.net

<body>

<divid="reset"><span>Reset</span>:</div>

<ulid="c_u"></ul>

</body>

</html>

6587845888
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML实现按钮生成随机图片位置并且随机背景颜色
m0_58144335的博客
06-29 662
HTML实现按钮生成随机图片位置并且随机背景颜色
图片的随机排列
01-28
插件描述：产生随机数排列位置. 参考示例：http://www.jq22.com/jquery-info5765
matlab中如何随机排列,科学网—对图片进行拆分并随机排列的快速算法（MATLAB） - 徐磊的博文...
weixin_39716044的博客
04-01 338
我手头快完成的一个改进荧光显微镜图像处理的研究项目需要用到拆分一个图片，并对其进行随机排列的功能。之前我写的程序虽然能够得到想要的结果，但是运行太慢，非常耗时。原方法是计算图片被拆分成的各个方格的位置，然后随机地挑选一个小方格，再随机挑选另外一个方格，并对两者进行替换，再使用循环语句将所有的方格都依次替换一遍。图片如果很大的话，这个替换就变得极其耗时。最近我想出来一个可以将运行速度数倍提高的方法，...
python随机排列图片_python 随机打乱 图片和对应的标签方法
weixin_39932479的博客
12-08 694
如下所示：# -*- coding: utf-8 -*-import osimport numpy as npimport pandas as pdimport h5pyimport pylabimport matplotlib.pyplot as plttrainpath = str('C:/Users/49691/Desktop/数据集/train/')testpath = str('C:/U...
jquery实现图片随机排列的方法
12-12
本文实例讲述了jquery实现图片随机排列的方法。分享给大家供大家参考。具体如下： 该代码可刷新后实现图片随便排列的jQuery特效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
jQuery名字排列随机点名特效代码
03-20
本文将详细解析"jQuery名字排列随机点名特效代码"这一主题，帮助开发者了解如何利用jQuery实现一个有趣且实用的功能，即点名系统。 首先，让我们了解一下jQuery的核心概念。jQuery通过一种简化的语法，使开发者可以...
jQuery图片散乱无序排列样式特效代码
03-20
jQuery图片散乱无序排列样式特效是一种常见的网页交互设计，它通过JavaScript库jQuery实现，能够为网站增添生动有趣的视觉效果。这种特效的核心在于利用CSS3的变换（transform）和过渡（transition）属性，以及...
jquery随机图片瀑布流无限加载特效代码
03-20
综上所述，jQuery随机图片瀑布流无限加载特效代码是结合了HTML、CSS和JavaScript（主要是jQuery）的技术实现，通过合理的布局算法和动态加载机制，为用户提供流畅的视觉体验。开发者可以根据自身的项目需求，灵活...
jQuery多组名字排列随机点名代码.zip
最新发布
09-22
在这个名为"jQuery多组名字排列随机点名代码.zip"的压缩包中，我们可以期待找到一个利用jQuery实现的点名系统，它能够随机选取一组或多组名字，为教学、会议等活动提供便利。 首先，`index.html`是网页的主体文件，...
图片的随机排列效果
06-01
图片的随机排列效果.产生随机数排列位置
jQuery图片自适应排列显示特效代码
03-20
jQuery图片自适应排列显示代码是一款基于jquery.flex-images插件实现的类似谷歌图片流效果。
不规则排列的图片展示特效，图片切换.rar
07-10
不规则排列的jquery图片展示特效，图片切换，那些圆形的大按钮就是控制按钮，点击后可控制图片切换，左侧显示标题信息，看上去整体很美观的效果。
分割图片随机排序
hbnight的专栏
05-09 947
突然来了兴致，写个切割图片随机排序。 Document body{padding:20px;} .picture{width:400px;height:350px;position:relative;margin:0 0 20px;} .picture:after{content:"";clear:both;display:block;} .pic
多个 DIV 自动 排序（基于Jquery）
Warren专栏
06-19 5743
$(function () {             var div = $('div').toArray().sort(function (a, b) {                 return parseInt($(a).attr("str")) - parseInt($(b).attr("str"))             });            $(div).app
html 随机位置,JavaScript中的div的随机位置
weixin_39524439的博客
06-09 923
这是一种方法.我随机地将div的大小在一个固定的范围内变化,然后设置位置,使对象总是放置在当前窗口边界内.(function makeDiv(){// vary size for funvar divsize = ((Math.random()*100) + 50).toFixed();var color = '#'+ Math.round(0xffffff * Math.random()).to...
利用jquery实现图片的浮动 完整代码
06-10
以下是利用 jQuery 实现图片浮动的完整代码： HTML 代码： ``` ``` CSS 代码： ``` .container { position: relative; width: 500px; height: 500px; } img { position: absolute; top: 0; left: 0; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值