<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. [LeetCode] 205. Isomorphic Strings 解题思路 - Java

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  2. H - Antenna Placement- hdu 3020（二分图匹配）

    题意:每个 ‘*’都需要一个1*2的东西覆盖,问最少需要多少个1*2的东西来覆盖这些‘*’ 分析:只需要求出来最多有多少个完全覆盖的,然后加上那些不能被完全覆盖的点即可..把G题的代码随便修改了一下就 ...

  3. java在windows下加载dll

    java在类中加载动态链接库文件. 类文件中: static { System.loadLibrary("dll文件"); } dll文件在工程的包路径下.例如:pro/bin/h ...

  4. 安装VS2012 update3提示缺少Microsoft根证书颁发机构2010或2011的解决方法

    警告提示如图: (copy的百度贴吧的童鞋的截图) 解决方法: 下载2010.10或2011.10的根证书即可 直通车:http://maxsky.ys168.com/ ——05.||浮云文件||—— ...

  5. [RxJS] Creation operators: fromEventPattern, fromEvent

    Besides converting arrays and promises to Observables, we can also convert other structures to Obser ...

  6. swift 深入理解Swift的闭包

    我们可用swift的闭包来定义变量的值. 先来一个简单的例子大家先感受感受. 定义一个字符串的变量的方法: 直接赋值 var str="JobDeer" 还可以用闭包的方式定义: ...

  7. 分层模型的典型应用和FishiGUI的分层模型

    分层模式的典型应用: 对于交互类型的软件也能够採用分层模式来进行架构分析,一般来说将交互性的软件分为三个层次比較合适:显示层的职责是为了显示信息,应用逻辑层封装那些一般不easy发生变化的核心逻辑,而 ...

  8. C#视频总结

    C#视频利用了四天看完了,由于有VB的基础.所以看起来并没有感觉太吃力.在主要的数据类型.运算之间没有多大的差别. 在循环控制语句上也就是大同小异.在类.继承和多态方面可能有一些陌生,可是经过了前期的 ...

  9. java 类加载过程

    1. 使用命令行查看类加载过程,在eclipse测试类的run configuration中配置-verbose:class或者-verbose,如下图所示: 运行结果如下所示: [Opened D: ...

  10. java/php/c#版rsa签名以及java验签实现--转

    在开放平台领域,需要给isv提供sdk,签名是Sdk中需要提供的功能之一.由于isv使用的开发语言不是单一的,因此sdk需要提供多种语言的版本.譬如java.php.c#.另外,在电子商务尤其是支付领 ...