<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. Ubuntu14.04 安装QQ国际版wine-qqintl

    Ubuntu14.04安装qq国际版方式: 首先下载,链接为:  https://pan.baidu.com/s/1boPitVD 密码:jp1j 也可去Ubuntu中文的Kylin(优麒麟)官网下载 ...

  2. Ext tabpanel集成第三方charts(echarts、amcharts等)的问题(报getstyle为null的错误)

    最近在做ext集成charts的功能,主要是使用tabpanel,将charts集成到tab中,随便切换tab选项就会报错崩溃. 之前演示的时候也发现了该问题,由于在tab项中有加载svg文件的操作, ...

  3. codeforces 341C Iahub and Permutations(组合数dp)

    C. Iahub and Permutations time limit per test 1 second memory limit per test 256 megabytes input sta ...

  4. 总结工作中常用到的linux命令大全_经典

    常用解压命令 tar.bz2 命令: tar -jxvf  *.tar.bz2 tar.z   命令: tar -zxvf  *.tar.z tar.gz   命令: tar -Zxvf  *.tar ...

  5. JS中字符串倒序的两种方法

    var reverse = function( str ){ var stack = [];//生成一个栈 for(var len = str.length,i=len;i>=0;i-- ){ ...

  6. html5 教程

    http://www.tutorialspoint.com/html5/index.htm

  7. eclipse中新建maven项目

    maven是个项目管理工具,集各种功能于一身,下面介绍maven web项目在eclipse种的配置,并于tomcat集成.配置成功后,可以跟一般的web项目一样调试. 一.准备条件 1.安装下载jd ...

  8. 设计模式（二）工厂模式Factory （创建型）

    工厂模式分为三种:简单工厂模式 (Simple Factory) .工厂方法模式(Factory Method).抽象工厂模式(Abstract Factory) //举例:发送邮件和短信的例子 /* ...

  9. [Typescript] Introduction to Generics in Typescript

    If Typescript is the first language in which you've encountered generics, the concept can be quite d ...

  10. HDU 3791 二叉搜索树 题解

    Problem Description 推断两序列是否为同一二叉搜索树序列   Input 開始一个数n,(1<=n<=20) 表示有n个须要推断,n= 0 的时候输入结束. 接下去一行是 ...