jquery实现图片随机排列的方法
本文实例讲述了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程序设计有所帮助。
相关推荐
-
jquery代码实现简单的随机图片瀑布流效果
为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练 代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery随机图片瀑布流无限加载</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:no
-
原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
-
Jquery实现动态切换图片的方法
本文实例讲述了Jquery实现动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
jQuery实现鼠标经过图片变亮其他变暗效果
以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo
-
jQuery简单实现图片预加载
jQuery实现图片预加载 JS代码 $(function(){ loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg); function loadImg(url,callback){ var img = new Image(); img.onload = function(){ img.onload = null; callba
-
JQuery分屏指示器图片轮换效果实例
本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: <script type="text/javascript"> var curr = 0, next = 0, count = 0; $(document).ready(f
-
jquery实现图片左右切换的方法
本文实例讲述了jquery实现图片左右切换的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
-
jQuery实现首页图片淡入淡出效果的方法
本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca
-
jquery实现图片随机排列的方法
本文实例讲述了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&qu
-
jQuery限制图片大小的方法
本文实例讲述了jQuery限制图片大小的方法.分享给大家供大家参考,具体如下: 最近在搞一个信息网站,文章内容中可以显示图片,所以就需要限制用户贴进去的图片的显示大小了. 在网上找到一段代码: $(document).ready(function(){ $("#viewnews_body img").each(function(){ var width = 620; var height = 600; var image = $(this); if (image.width() >
-
jquery实现图片切换代码
本文实例为大家分享了jquery实现图片切换的方法,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js&qu
-
jquery简单图片切换显示效果实现方法
本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery图片切换效果</title> <script type="text/javascr
-
jQuery在页面加载时动态修改图片尺寸的方法
本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(
-
基于jQuery实现图片推拉门动画效果的两种方法
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li></li> --> <li&g
-
jQuery动态背景图片效果实现方法
本文实例讲述了jQuery动态背景图片效果实现方法.分享给大家供大家参考.具体如下: 这里把背景图片按照1.jpg - 20.jpg放到目录里,jQuery会随机调用这些图片作为背景 $(document).ready(function(){ bgImageTotal=20; randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1; imgPath=('/my/image/path/'+randomNumber+'.jpg'); $
-
jQuery实现图片加载完成后改变图片大小的方法
本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <
-
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<
-
jQuery实现图片与文字描述左右滑动自动切换的方法
本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition