jQuery马赛克过渡效果

这是一个马赛克使用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元素作为一个容器。2345678var 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'); 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;}除了上述之外,通过执行一些小更改代码,我们可以改变过渡的顺序来完成其他影响。例如,通过随机洗牌数组的元素,我们可以实现这种效果。

在线演示        积分下载        6毛下载        砍两刀下载