<html>

    <head>

        <style type="text/css">

            .picture-wall-container{

                position: relative;

                margin:100px;

            }

            .picture{

                position: absolute;

                padding:5px;

                background-color: white;

                box-shadow: gray 1px 1px 1px;

                transition:transform 0.3s;

            }

        </style>

        <script type="text/javascript" src="jquery.js"></script>

    </head>

    <body>

        <div class="picture-wall-container">

            <img id="picture-1" class="picture" src="imgs/1.png" />

            <img id="picture-2" class="picture" src="imgs/2.png" />

            <img id="picture-3" class="picture" src="imgs/3.png" />

            <img id="picture-4" class="picture" src="imgs/4.png" />

            <img id="picture-5" class="picture" src="imgs/5.png" />

            <img id="picture-6" class="picture" src="imgs/6.png" />

            <img id="picture-7" class="picture" src="imgs/7.png" />

            <img id="picture-8" class="picture" src="imgs/8.png" />

            <img id="picture-9" class="picture" src="imgs/9.png" />

            <img id="picture-10" class="picture" src="imgs/10.png" />

            <img id="picture-11" class="picture" src="imgs/11.png" />

            <img id="picture-12" class="picture" src="imgs/12.png" />

            <img id="picture-13" class="picture" src="imgs/13.png" />

            <img id="picture-14" class="picture" src="imgs/14.png" />

            <img id="picture-15" class="picture" src="imgs/15.png" />

        </div>

        <script type="text/javascript">

            function getRandom(min, max){

                var r = Math.random()*(max-min)+min;

                r = Math.ceil(r);

                return r;

            }

            $(document).ready(function(){

                var hcount = 5;

                var vcount = 3;

                var picWidth = 300;

                var picHeight = 200;

                var left = 0;

                var top = 0;

                var angles = [];

                var zindexs = [];

                for(var i = 1; i <= 5;i++){

                    left = left + picWidth - picWidth/3;

                    if(i == 1){

                        left = 0;

                    }

                    var picid = "#picture-" + i;

                    var zindex = getRandom(0,10)%3+1;

                    var angle = getRandom(5, 15);

                    var d = getRandom(0, 10);

                    if(d<=5){

                        angle *= -1;

                    }

                    $(picid).css({"left":left+"px","top":top+"px","z-index":zindex,"transform":"rotate("+angle+"deg)"});

                }

                left = 0;

                top = 2*picHeight/3;

                for(i=6;i<=10;i++){

                    left = left + picWidth - picWidth/3;

                    if(i== 6){

                        left = 0;

                    }

                    picid="#picture-"+i;

                    zindex = getRandom(0,10)%3+1;

                    angle = getRandom(5, 15);

                    d = getRandom(0, 10);

                    if(d<=5){

                        angle *= -1;

                    }

                    $(picid).css({"left":left+"px","top":top+"px","z-index":zindex,"transform":"rotate("+angle+"deg)"});

                }

                left = 0;

                top = 4*picHeight/3;

                for(i=11;i<=15;i++){

                    left = left + picWidth - picWidth/3;

                    if(i== 11){

                        left = 0;

                    }

                    picid="#picture-"+i;

                    zindex = getRandom(0,10)%3+1;

                    angle = getRandom(5, 15);

                    d = getRandom(0, 10);

                    if(d<=5){

                        angle *= -1;

                    }

                    $(picid).css({"left":left+"px","top":top+"px","z-index":zindex,"transform":"rotate("+angle+"deg)"});

                }

                $(".picture").each(function(index, item){

                        $(this).hover(function(){

                            angles[index] = $(this).css("transform");

                            zindexs[index] = $(this).css("z-index");

                            $(this).css({"z-index":4,"transform":"rotate(0deg)"});

                        },function(){

                            $(this).css({"z-index":zindexs[index],"transform":angles[index]});

                        });

                    });

            });

        </script>

    </body>

</html>

jQuery CSS3 照片墙的更多相关文章

  1. css3照片墙+曲线阴影

    css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...

  2. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  3. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  4. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  5. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  6. jQuery+css3 弹幕

    写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...

  7. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  8. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  9. 使用 jQuery & CSS3 实现翻转的作品集滑块

    作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果.展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果.在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转 ...

随机推荐

  1. Hadoop CombineFileInputFormat实现原理及源码分析

    Hadoop适用于少量的大文件场景,而不是大量的小文件场景(这里的小文件通常指文件大小显著小于HDFS Block Size的文件),其主要原因是因为FileInputFormat在为这些小文件生成切 ...

  2. 数据库 —— mySQL的基本操作

    学习资源: 0.学习教程 :MySQL 教程(runoob.com)   (MySQL Tutorial)turtorialPoint 1.学习帮助手册与平台: MySQL学习平台   英文手册chm ...

  3. 提交表单时的等待(loading)效果

    $(document).ready(function () { $("body").prepend('<div id="overlay" class=&q ...

  4. 经典C面试题

    12个有趣的C语言面试题 面试题C 摘要:12个C语言面试题,涉及指针.进程.运算.结构体.函数.内存,看看你能做出几个! 1.gets()函数 问:请找出以下代码里的问题: #include< ...

  5. #include<iostream.h>与#include<iostream> using namespace std的区别

    所谓namespace,是指标识符的各种可见范围.C++标准程序库中的所有标识符都被定义于一个名为std的namespace中.  一 :<iostream>和<iostream.h ...

  6. 计算方法（三）C#矩阵类库

    测量平差以及工科中常常用到矩阵的相关运算,因此自己写了一个,同时考虑到了类库的可用性,这次又重载了比较匀运算符,修正了一些问题 using System; using System.Collectio ...

  7. Fragment 基础

    FragmentActivity与Activity区别 fragment是3.0以后的东西,为了在低版本中使用fragment就要用到android-support-v4.jar兼容包,而fragme ...

  8. 关于禁止在 .NET Framework 中执行用户代码。启用 "clr enabled" 配置选项

    这个问题是我新装好sql2008r2以后,我把服务器上的数据库还原到本地,取代码里跟踪测试的时候,出现的这个问题. 然后我在网上找了之后在sql里直接新建查询执行如下语句: exec sp_confi ...

  9. ZOJ1524

    题意:给定需要购买物品的顺序以及总物品对应的价格,求解按顺序购买物品时最小花费. 输入: m,n(m代表需要购买物品的清单,n代表总的物品数) Xi...(代表对应物品的序号以及价格) 输出: cos ...

  10. java 判断浏览器

    String agent = request.getHeader("User-Agent").toLowerCase(); Pattern pattern = Pattern.co ...