Check

textとか、windowを揺らす

| | コメント(0) | トラックバック(0)
テキスト置き換えはinnerHTML。ちゃんとinsertBeforeとかremoveChildとか使った方がいいのかな。。。

$(function () {
    var pos = [3, -3, 3, -3, 3, -3];
    var a = document.getElementById('menu').getElementsByTagName('a');
    var len = a.length;
    $('#menu a').mouseover(function () {
        var ps = pos.concat();
        var val = setInterval(function () {
            var p = ps.shift();
            p ? window.moveBy(0, p) : clearInterval(val);
        }, 10);
    });
    $('a:not(:hidden)')
        .each(function () {
            var child = this.childNodes;
            var length = child.length;
            for (var i = 0; i < length; ++i) {
                var self = child[i];
                if (self.nodeType != 3 && (!self.nodeValue || self.nodeValue.match(/^\s*$/))) continue;
                self.parentNode.innerHTML = self.nodeValue.replace(/(.)/g, '<span class="brbr" style="position:relative">$1</span>');
            };
        })
        .mouseover(function () {
            var ps = pos.concat();
            var $_ = $(this);
            var val = setInterval(function () {
                var p = ps.shift();
                if (!p) {
                    $_.find('.brbr').css('top', '');
                    return clearInterval(val);
                };
                $_.find('.brbr').each(function () {
                    $(this).css({top:(Math.random() - 0.5) * 10})
                });
            }, 10);
        });
    ;
});

もういっこ。ぼつったけどリンク自体を揺らせるバージョン。

    $('a:not(:hidden)')
        .hover(function () {
            if ($.data(this, 'brbr')) return;
            $.data(this, 'brbr', true);
            var ps = pos.concat();
            var $_ = $(this).css('position', 'relative');
            var val = setInterval(function () {
                var p = ps.shift();
                if (p) return $_.css('top', p);
                $_.css({'position':'','top':0});
                clearInterval(val);
            }, 10);
        }, function () {
            $.data(this, 'brbr', false);
        });
    ;

トラックバック(0)

このブログ記事を参照しているブログ一覧: textとか、windowを揺らす

このブログ記事に対するトラックバックURL: http://0-9.sakura.ne.jp/mt/mt-tb.cgi/633

コメントする