Welcome, Old Sport!

图片排列自动重组

by ilikecss ON 2013/01/31 5866

图片排列自动重组今天的教程是如何让你的简历更加丰富多彩,比如你可以让自己的写真有点特效。东西还是很简单的,使用jQueryCSS3组合很容易就可以实现,大家可以先参照下面的Demo。原理是选择一张图片将其等分后切图,Demo是600×600的写真,把它切割成200×200的9张小图片,以此类推,本效果HTML还是比较简单的,就是CSS非常的多,下面Demo的CSS就不贴了,请下载后自行查看,接着就一起来看下是如何制作的。(由于github最近不稳定,我把代码上传到code google了)

Step1. 创建HTML

<div class="photos module">
    <div  class="photos-holder clearfix">
        <a class="start-animation" href="#"><span class="hey">HEY!</span><span class="click-me">Click me!</span></a>
        <img src="img/tile-1.jpg" class="one" alt="image1">
        <img src="img/tile-2.jpg" class="two" alt="image2">
        <img src="img/tile-3.jpg" class="three" alt="image3">
        <img src="img/tile-4.jpg" class="four" alt="image4">
        <img src="img/tile-5.jpg" class="five" alt="image5">
        <img src="img/tile-6.jpg" class="six" alt="image6">
        <img src="img/tile-7.jpg" class="seven" alt="image7">
        <img src="img/tile-8.jpg" class="eight" alt="image8">
        <img src="img/tile-9.jpg" class="nine" alt="image9">
        <img src="img/whole.jpg" class="whole" alt="image whole">          
    </div>
</div>

Step2. 插入脚本

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(function() {
    $(".start-animation").click(function(e) {
        $this = $(this);
        e.preventDefault();
        $this.addClass("fade");
        setTimeout(function() {
            $this.remove();
            $(".photos").addClass("animate")
        },
        400);
        setTimeout(function() {
            $(".photos").addClass("animate-done")
        },
        4e3)
    });
});
$(window).load(function() {
    $(window).on("debouncedresize", 
    function() {
        widthTesterResized = $(window).width();
        if (widthTester != widthTesterResized) {
            $(".blurb-photos").attr("style", "");
            $(".photos-holder").attr("style", "");
            $(".project p").attr("style", "");
            setTimeout(function() {
                e()
            },
            350);
            t();
            widthTester = widthTesterResized
        }
    });
});
5条评论
  1. #1

    熟女控说道:

    独立博客很不容易啊,坚持下去,加油加油。
    有空来我的小站回访一下哈。

  2. #2

    哼哼猪说道:

    :smile: 轻轻的我来了,就像没有走过一样

  3. #3

    桃子说道:

    好,写的好,写得太好了 ,虽然我看不懂 :cool:

  4. #4

    街拍丝袜说道:

    我也想说 我看不懂




TOP