jQuery实现自适应缩略图桩效应与自动分组

分类栏目:用户体验 - 前端开发

252830

发布于 4 条评论

这是用一个实验性的jQuery插件,将一组缩略图根据共享数据属性组合(下文将会讲到)堆在一起,当点击其中的一个缩略图组合时,属于这个组合里面的缩略图将会通过CSS转换扩散到一个网格布局里。

ThumbnailPileEffect

查看预览下载附件

通过这个jQuery插件,可以将缩略图根据桩效应自动分组,当点击缩略图组合的时候,会识别图片的共享数据属性,将组合扩散分布到网格布局中的位置,其间加以利用CSS的控制,使其有很好的过渡效果。

网格本身是拥有自适应布局的效果,这就意味着在网页上水平宽度不够的情况下会自动调整布局,可以在不同分辨率的设备上都有个很好的视觉效果。

下面是这个例子中用到的素材原作者,我们得尊重他们,这是做人的基本:

注意一下,这个示例中的CSS转换和过渡效果,需要浏览器的支持。IE6的同学请见谅了……
那怎么使用这个插件呢﹖很简单,我们得创建一个无序列表,class为tp-grid,示例如下:

<ul id="tp-grid" class="tp-grid">

    <li data-pile="Group 1">
        <a href="#" rel="external nofollow" >
            <span class="tp-info">
                <span>Some title</span>
            </span>
            <img src="images/1.jpg" />
        </a>
    </li>

    <li data-pile="Group 2">
        <!-- ... -->
    </li>

    <li data-pile="Group 1,Group 2">
        <!-- ... -->
    </li>

    <!-- ... -->

</ul>

其中的data-pile属性是控制缩略图组合的名称,我们可以根据这个名称给所有的缩略图分类,注意的是,其中的任何一张缩略图可以有两个或两个以上的类别,也就是说可以给这个data-pile属性同时定义两个或两个以上的名称。最后的效果将根据data-pile属性来自动分组。

插件引用方式:

$( '#tp-grid' ).stapel();

jQuery选项

下面是默认选项,可自己DIY,实现自己想要的效果:

$.Stapel.defaults = {

    // space between the items
    gutter : 40,

    // the rotations degree for the 2nd and 3rd item
    // (to give a more realistic pile effect)
    pileAngles : 2,

    // animation settings for the items of the clicked pile
    pileAnimation : {
        openSpeed : 400,
        openEasing : 'ease-in-out',
        closeSpeed : 400,
        closeEasing : 'ease-in-out'
    },

    // animation settings for the other piles
    otherPileAnimation : {
        openSpeed : 400,
        openEasing : 'ease-in-out',
        closeSpeed : 350,
        closeEasing : 'ease-in-out'
    },

    // delay for each item of the pile
    delay : 0,

    // random rotation for single items
    randomAngle : false,

    // callback functions
    onLoad : function() { return false; },
    onBeforeOpen : function( pileName ) { return false; },
    onAfterOpen : function( pileName, totalItems ) { return false; },
    onBeforeClose : function( pileName ) { return false; },
    onAfterClose : function( pileName, totalItems ) { return false; }

};

示例中的基本样式保存在stapel.css文件里面,可以下载附件后查看下,这里就不多介绍了。

示例预览

演示一演示二演示三

最后提醒下,要记得引入用jQuery库。祝大家周末愉快……

译文文章:Codrops

全部评论 / 4

  1. 2011-03-21 23:11
    浏览 888
    评论(0)

    佚名 2012-11-23
    3
  2. 非常棒的站点! :mrgreen: :mrgreen:

    佚名 2012-11-23
    2
    1. 测试下各个功能
      测试下各个功能
      测试下各个功能
      测试下各个功能

      测试下各个功能

      佚名 2012-11-23
  3. 效果很不错,里面的素材图片很有feed…… :twisted:

    酷鸟 2012-11-23
    1