jQuery动态相册墙效果

  • A+
所属分类:Web前端

本文要介绍的是一个简单的相册墙动态效果,只是提供了一种思路,并没有完善快速点击和任意尺寸,如果需要可以自行添加stop()和动态获取宽高以及动态设置背景定位。

在线demo:

jQuery动态相册墙效果展示链接(点击此处)

 

相关代码:

jQuery动态相册墙效果源码(点击此处)

jQuery动态相册墙效果

 

简单解释一下代码:

相册由5X5个方块组成,根据这种排列,使用li标签是一个好的选择,首先在网页中添加好一个ul标签。

<ul id="wrap" class="center"></ul>

我们要动态的向网页中加入li,并且让每个盒子显示不同的图片,通过变量i,改变背景图的路径。

for (var i = 0; i < 25; i++) {
        var div = $('<div class="box"></div> ')
        .css('background-image', 'url(images/' + i + '.jpg)');
        $('<li></li> ').append(div).appendTo('#wrap');
}

我们要排列好图片容器的顺序,每个盒子显示不同的图片。这点可以通过设置ul的宽度和li浮动达到,但是考虑到性能问题,我们这里使用定位,为li添加position: absolute绝对定位,在js中通过动态的改变left值和top值,排列盒子。

var left = 0;
var top = 0;
for (var j = 0; j < 25; j++) {
   $('#wrap li').eq(j).css({'left':left,'top':top});
   left += 196//这里是盒子的宽度,当时写的太粗糙,其实这些参数都设置成动态获取比较好;
   if(left>=980){
       top+=100;
       left=0;
   }
}

当鼠标点击的时候,显示当前点击对象的大图,再次点击重新显示每个小图,在这我给定一个chang初始值为true,做判断用;
首次点击的时候,合拢,获取当前点击图片的背景图路径,将所有盒子的背景图都换成这个被点击的图片;然后我们为每个背景图添加一个背景图定位,同时将background-size设为auto,让背景图正常尺寸显示。  最后,我们只需要改变每个盒子中图片的背景图位置,即可实现,让每个图片显示图片中指定的一部分,最后拼凑成一整张图片, 并将change值改变为false。

当再次点击的时候,执行第二个条件,再次将所有盒子中显示的图片回归到原来的状态即可。

以免切换太过生硬,所以添加了delay()延迟,让图片在切换的时候,有动态效果。

var change = true;//做判断用
wrap.find('li').on('click', function () {
    if (change == true) {
        var bgImg = $(this).find('div').css('background-image');//获取路径
        var bgLeft = 0;
        var bgTop = 0;
        $('#wrap li').each(function (index) {//遍历li
            var $this=$(this);
            //以遍历的索引*一个数值,设定delay的值,40*1,40*2,以此类推
            $(this).delay(40*index).animate({"opacity":0},200, function () {
                $this.css({
                    'transform': ' rotate(0deg) ' +
                    'translateX(0)' +
                    'translateY(0)'
                });
                $this.find('div').css({
                    'background-image': bgImg,
                    'background-size': 'auto',
                    'backgroundPositionX': -bgLeft,
                    'backgroundPositionY': -bgTop,
                    'transform': 'scale(1)'
                });
                bgLeft += 196;//每遍历一次 背景定位的left和top值都会发生改变
                if (bgLeft >= 980) {
                    bgTop += 100;
                    bgLeft = 0;
                }
                $this.animate({"opacity":1},300);
            })
        });
        change = false;

    } else if (change == false) {//分散
        $('#wrap li').each(function (index) {
            var c=index %collums;
            var r=parseInt(index/collums);
            var $this=$(this);
            $(this).delay(40*index).animate({"opacity":0},200, function () {
                $this.css({
                    'transform': 'rotate(' + (Math.random() * 40 - 20) + 'deg)' +
                    'translateX(' + (30*c-60) + 'px)' +
                    'translateY(' + (30*r-60) + 'px)'
                });
                $this.find('div').css({
                    'background-image': 'url(images/' + index + '.jpg)',
                    'background-size': 'cover',
                    'transform': 'scale(0.9)'
                });
                $this.animate({"opacity":1},200);
            })

        });
        change = true;
    }
})

 

牧某人

发表评论

您必须登录才能发表评论!