<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. 【转】（DT系列六）devicetree中数据和 struct device有什么关系

    原文网址:http://www.cnblogs.com/biglucky/p/4057499.html devicetree中数据和structdevice有什么关系 总体来说,devicetree与 ...

  2. mongodbOperator

    mongodb创建数据库表语句 db.createCollection("CollectionName or tableName"); db.createCollection(&q ...

  3. Appium 环境搭建

    1.安装nodejs 下载地址: http://nodejs.org/download/ 下载之后一路next就好. 验证是否安装成功: node -v

  4. win7安装ruby on rails

    开发机:win7 旗舰版 - 64位 1,安装ruby,下载rubyinstaller-2.0.0-p451.exe 下载地址:http://rubyinstaller.org/downloads/ ...

  5. Object -C self -- 笔记

    - 是实例方法,是用实例对象进行调用的:+ 是类方法,又称静态方法,是用类来调用的: @interface Person: NSObject { int _age; } - (void) setAge ...

  6. 在终端(Terminal)里用命令行进行数学运算

    有时候我们进行一些数学运算,我们会去开系统自带的计算来做这件事情,其实我们也可以直接在终端里面用命令行进行的. 在命令行里敲 bc 进入数学计算模式,然后随便输入数学表达式 回车 ,结果就出来了,是不 ...

  7. 【深入了解cocos2d-x 3.x】定时器（scheduler）的使用和原理探究（3）

    上篇文章分析到了定时器的定义.这篇的重点就是定时器是怎样执行起来的. 1.从main中寻找定时器的回调 讲定时器的执行,就不得不触及到cocos2dx的main函数了,由于定时器是主线程上执行的.并非 ...

  8. PHP开发Android应用程序(转)

    第一部分是指在Android系统的手机上直接写PHP脚本代码并立即运行:第二部分则继续讲解如何把写好的PHP脚本代码打包成akp安装文件. 首先,在手机上安装两个apk包. 一个是SL4A(Scrip ...

  9. MySQL定时备份之使用Linux下的crontab定时备份实例

    这篇文章主要介绍了使用Linux下的crontab进行MySQL定时备份的例子,需要的朋友可以参考下   复制代码代码如下: ##################################### ...

  10. Yii自定义错误提示消息

    英文原文: http://www.yiiframework.com/wiki/1/how-to-customize-the-error-message-of-a-validation-rule/ Va ...