具有随机alpha效果的Jquery Grid

时间:2012-11-01 21:45:56

标签: jquery grid tiles alpha

好的,我只需要点亮一下。

我想制作一个视觉效果,就像本网站右侧微笑图像上的视觉效果一样。

http://iitweb.com/

基本上是具有随机alpha的网格图块效果,在图像上连续地打开和关闭。我有什么想法可以用于此吗?

1 个答案:

答案 0 :(得分:0)

嗯,这对你来说可能有点晚,但它可能会帮助任何人寻找同样的事情。

这是我的第一个方法:

<强> HTML

<img src="https://profile-b-ord.xx.fbcdn.net/hprofile-ash3/27537_111050195577875_7540_q.jpg" alt="" />
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc7/369585_100004094319706_2126721826_q.jpg" alt="" />
<img src="http://vialibrepl.com/wp-content/uploads/2013/08/THUNDERCATS-50x50.jpg" alt="" />
<img src="http://www.brainzum.com/wp-content/uploads/2013/02/Inspector-Gadget-Go-Go-Gadget-Collection1-50x50.jpg" alt="" />
<img src="http://spe.fotolog.com/photo/46/54/51/_melizita/Homer_Simpson_1240210329589_t.jpg" alt="" />

<强> JS

function fadeRandomTile()
{
    var tiles = $("img").length;
    var random_tile = Math.floor(Math.random() * tiles);
    var $tile = $("img").eq(random_tile);

    if(!$tile.data("alpha"))
    {
        $tile.fadeTo(500, 0.5).data("alpha", true);
    }
    else
    {
        $tile.fadeTo(500, 1).data("alpha", false);
    }
}

setInterval(function(){fadeRandomTile()}, 1000);

<强>样本 http://jsfiddle.net/gEpan/1/

相关问题