<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. 【转】在linux内核中读写文件 -- 不错

    原文网址:http://blog.csdn.net/tommy_wxie/article/details/8194276 1. 序曲 在用户态,读写文件可以通过read和write这两个系统调用来完成 ...

  2. HDOJ(HDU) 2090 算菜价(简单水题、)

    Problem Description 妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多少钱真是一笔糊涂帐.现在好了,作为好儿子(女儿)的你可以给她用程序算一下了,呵呵. Input ...

  3. Linux下DVD-R刻录问题

    之前CD的刻录一直使用的命令行工具集cdrtools中的mkisofs.cdrecord.然后本来刻录DVD可以使用它的growisofs命令. 现在假设原始文件目录为/src/,目标目录为/dest ...

  4. Selenium webdriver 查找元素

    1.简单查找 By ID: WebElement element=driver.findElement(By.id("userId")); By Name:WebElement e ...

  5. maven,本地仓库和私服nexus的配置,以及eclipse载入maven

    首先可以进入http://maven.apache.org/官网查看如何配置 一.配置环境 1 确定自己的java运行环境配置正确-->在cmd运行 java -version或echo %JA ...

  6. trigger()和triggerHandler()

    trigger()方法触发事件后,还会执行浏览器的默认事件,例如: $('input').trigger("focus); 这一行代码不仅会触发为<input>元素绑定的focu ...

  7. java cmd常用命令

    熟悉Java的常用命令 面试例题11:使用jar命令. 请使用jar命令,将test文件夹压缩成.jar文件,并简述其压缩包的结构. 考点:对于Java程序员来说,更多情况下是使用集成Java开发工具 ...

  8. ASP.NET MVC 3 Model【通过一简单实例一步一步的介绍】

    今天主要讲Model的两个方面: 1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍 2. ASP.Net MVC 3 Model 的一些验证 MVC 中 Model ...

  9. Unity3D之MeleeWeaponTrail武器轨迹插件的使用

    MeleeWeaponTrail是Unity Asset Store中的一个免费插件.主要是用于显示武器的轨迹. 首先,找到武器绑定的骨骼.并在骨骼以下加入轨迹显示的起点和终点. 接着,给该骨骼加入M ...

  10. Android SwitchButton（滑动开关）

    @RemoteView public class Button extends TextView { public Button(Context context) { this(context, nu ...