jQuery马赛克过渡效果

jQuery马赛克过渡效果1254
这是一个马赛克使用jQuery两张照片之间的过渡效果
我们将使用两个照片与相同的维度。我们唯一需要HTML代码(除了加载脚本)是一个HTML元素(它可以任何你想要的,我使用一个div),我们将使用我们的容器。它应该有一个独特的id;我把它命名为“马赛克”。

的我们必须编写CSS代码如下(替换图片的文件名成你的):
#mosaic
{
    background-image: url('bottom.jpg');
}
  
#mosaic span.hover
{
    float: left;
    background-image: url('top.jpg');
}

  现在,让我们讨论JavaScript。    我们首先声明和initialising一些变量:包含图片的宽度和高度尺寸,元素是数组,将我们将创建的元素的叠加,将形成基地照片,计数稍后将用于帮助我们遍历的元素数组,和埃尔是我们正在使用的HTML元素作为一个容器。
2
3
4
5
6
7
8
var width = 640;
var height = 480;
 
elements = new Array();
count = 0;
    
var el = $('#mosaic');
el.width(width).height(height);
下一步是指定的数量水平和垂直部分我们希望我们的马赛克是由。然后,在此基础上选择,我们计算的总数,以及它们的尺寸。
ar horizontal_pieces = 8;
var vertical_pieces = 6;
total_pieces = horizontal_pieces * vertical_pieces;
 
var box_width = width / horizontal_pieces;
var box_height = height / vertical_pieces;
之后,基于上面的值,我们创建一组span元素(分配惟一的id),这将作为瓷砖,马赛克,并将用于执行转换的效果。 形成一个完整的照片,我们将使用照片作为一个雪碧。我们已经指定它为背景的span元素使用#马赛克。悬停CSS规则,所以我们只需要做一些计算来计算的哪一部分需要照片
var vertical_position = 0;
 
for (i=0; i<total_pieces; i++)
{
    var tempEl = $('<span class="hover" id="hover-' + i + '"></span>');
    
    var horizontal_position = (i % horizontal_pieces) * box_width;
    
    if(i > 0 && i % horizontal_pieces == 0)
    {
        vertical_position += box_height;
    }
 
    tempEl.css('background-position', '-' + horizontal_position + 'px -' + vertical_position + 'px');
    
    el.append(tempEl);
    elements.push(tempEl);
}
最后,我们应用维度我们计算在所有的span元素之前,我们调用toggleDisplay函数(我将解释它在一点)每100毫秒。
$('#mosaic .hover').width(box_width).height(box_height);
setInterval(toggleDisplay, 100);
我们将继续我之前提到的toggleDisplay函数。 这是一个非常简单的函数,它抓住下一个项目将是检查的元素数组(基于计数变量),和切换其不透明度值。最后,它迭代计数变量。
function toggleDisplay()
{
    var tempEl = elements[count];
    var opacity = tempEl.css('opacity');
 
    if(opacity == 0)
    {
        tempEl.animate({ opacity: 1 })
    }
    else
    {
        tempEl.animate({ opacity: 0 })
    }
 
    count = (count + 1) % total_pieces;
}
除了上述之外,通过执行一些小更改代码,我们可以改变过渡的顺序来完成其他影响。例如,通过随机洗牌数组的元素,我们可以实现这种效果。

也许你还喜欢