ホーム >> 左脳Script >> Java Script >> 逃げるリンク

逃げるリンク


全く持って役に立たない、リンク遁走化モジュールを作ってみました。

ナンのコトだか判らない人は、ホームへ移動して、リンクの様子を見てみて下さい。


およそ10年前に初めて作ったホームページで、それなりに好評だった 無意味な機能逃げるリンクを手軽に使えるようにモジュールっぽくしてみました。

以下ソース。prototype.js や jquery なんかを使っている場合は、マウス座標取得関数の登録方法に少々の変更が必要です。

//  マウス座標用の関数登録
var mouseX,mouseY;
if( window.createPopup  )
{
    document.onmousemove    =   function(e)
    {
        mouseX  =   document.body.scrollLeft    +   event.clientX;
        mouseY  =   document.body.scrollTop     +   event.clientY;
    };
}
else
{
    document.onmousemove    =   function(e)
    {
        mouseX  =   e.pageX;
        mouseY  =   e.pageY;
    };
}

//  リンクの逃走化関数
function    escAway(idName)
{
    //  対象特定
    var t   =   document.getElementById(idName);
    if( t==null )   return;
    //  同じような外見になるタグUを作る
    var m   =   document.createElement("u");
    m.className =   t.className;
    m.innerHTML =   t.innerHTML;
    //  影となる<u>タグの登録し、対象を子ノードにする
    var p   =   t.parentNode;
    p.replaceChild(m,t);
    m.appendChild(t);
    m.style.position    =   "relative";
    t.style.position    =   "absolute";
    t.style.left    =   0;
    t.style.top     =   0;
    //  エレメントの座標を求める
    var element = m;
    var ex = 0;
    var ey = 0;
    while(element)
    {
        ex  +=  element.offsetLeft;
        ey  +=  element.offsetTop;
        element =   element.offsetParent;
    }
    //  逃走リンクメイン
    var nx  =   0;
    var ny  =   0;
    var vx,vy;
    var runM    =   0;
    var nw  =   m.offsetWidth/2.0;
    var nh  =   m.offsetHeight/2.0;
    var nrr =   nw*nw+nh*nh;
    var moveFunc    =   function()
    {
        var blx=ex+nw-mouseX;
        var bly=ey+nh-mouseY;
        //  逃走部分
        if(runM<1)
        {
            if(runM==-1&&blx*blx+bly*bly>40000) runM=0;
            var gpr=Math.sqrt(nx*nx+ny*ny)+50;
            if(runM==0&&gpr<60)
            {   //  元の場所に戻る
                vx=0;
                vy=0;
                ax=0;
                ay=0;
                nx=0;
                ny=0;
                runM=9
            }
            else
            {   //  マウスから逃げる加速度
                ax=-nx*gpr/500;
                ay=-ny*gpr/500;
            }
        }
        else
        {
            ax=0;
            ay=0;
            runM--;
        }
        //  元に収まる部分
        var gmx =   blx+nx;
        var gmy =   bly+ny;
        var gmr =   .25*gmx*gmx+gmy*gmy;
        if(runM<0)
        {
            if(runM<-1) runM++;
            if(gmr>=100)    //  スルっと元に戻る閾値
            {
                ax+=gmx/gmr*3000;
                ay+=gmy/gmr*3000;
            }
            else
            {
                th=Math.random()*6.288185307178;
                vx=Math.sin(th)*50;
                vy=Math.cos(th)*50;
            }
        }
        //  反応&逃走開始
        if(runM<1&&gmr<nrr) runM=-10;
        //  移動量算出
        vx=vx*.6+ax;if(vx>20){vx=20}else{if(vx<-20){vx=-20}}
        vy=vy*.6+ay;if(vy>20){vy=20}else{if(vy<-20){vy=-20}}
        nx+=vx;
        ny+=vy;
        //  移動
        t.style.left    =   nx;
        t.style.top     =   ny;
        //
        setTimeout(moveFunc,50);
    };
    //  開始
    moveFunc();
}


仕様
  • escAway("ID名")
    で、指定したタグを逃げるオブジェクトにします。<A>タグでなくとも遁走化できますが、置き換えが<U>タグなので、見た目が同じ<A>タグが最も自然に逃げるリンクに偽装できます。
  • スタイルをクラスで指定しないとリンクと裏の影の見た目が一致しなくなるので注意して下さい。
    と、書きはしましたがそれほど制約はないと思います。
  • ページの css 又は、スタイルの指定によっては、全く動作しない事があります。実は、このブログの記事中で、逃げるリンクを実演しようとしたのですが出来ませんでした。
    現在、調査中です。
    2009年6月16日追記:「.style.left、.style.top」に値を設定する際、数値の末尾に"px"を付け加え、単位を明確にしないと値が反映されない事が判りました。

このコードのポイントは、マウスから逃げる距離に偏りがあり、じりじり追い詰めるような方法でもなかなかリンクをクリックできないところにあります。

いろいろ値を変えて、捕まえにくいリンクを作ってみて下さい。



トラックバック(1)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/47

あの">遁走リンクが、バージョンアップしました。 ウザさ3倍、重さ5倍です!... 続きを読む

コメントする

ホーム >> 左脳Script >> Java Script >> 逃げるリンク

アーカイブ

このブログ記事について

このページは、n-yagiが2009年5月12日 12:37に書いたブログ記事です。

ひとつ前のブログ記事は「座標取得」です。

次のブログ記事は「アスキーアート」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。