Home > スポンサー広告 > User JavaScriptの練習 - キーイベントで要素を動かす

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/69-6ab43119
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - キーイベントで要素を動かす

Home > user javascript > User JavaScriptの練習 - キーイベントで要素を動かす

User JavaScriptの練習 - キーイベントで要素を動かす

user javascript

Opera User JavaScriptで役に立たないスクリプトを書いてます。

Google検索の Googleのロゴをカーソルキーで動かす

Google検索のページを開いて、カーソルキー()を押すと、Googleのロゴが動く。入力フィールドの判定もしていないため、入力フィールドにフォーカスがあっても動きます。

// ==UserScript==
// @include http://www.google.co.jp/*
// @include http://www.google.com/*
// ==/UserScript==

document.addEventListener('load', function() {
    var logo=document.getElementById('logo');
    if ( !logo) {
        logo = document.getElementById('lgpd').nextSibling;
    }
    // ロゴを複製
    var clone = logo.cloneNode( true )
    clone.style.position='fixed';
    // 元のロゴの座標に近づける
    var x = logo.offsetLeft;
    var y = logo.offsetTop;
    clone.style.left = x + 'px';
    clone.style.top = y + 'px';
    document.body.appendChild( clone );
    // 元のロゴを隠す
    logo.style.visibility = 'hidden';

    document.addEventListener('keypress', function() {
        // キーの判定
        switch( event.keyCode ) {
        case 37:    // ←
            x -= 20;
            break;
        case 39:    // →
            x += 20;
            break;
        case 38:    // ↑
            y -= 20;
            break;
        case 40:    // ↓
            y += 20;
            break;
        default:
            return;
        }
        clone.style.left = x + 'px';
        clone.style.top = y + 'px';
    }, false);
}, false);

ロゴの要素の positionをそのまま'fixed'にすると、ロゴと入力フィールドが重なるため、元のロゴを残して、ロゴを複製した要素を実際には動かしている。

キーイベントに'keydown'だとキーリピートが効かないから、'keypress'を用いている。

Operaで定義されているショートカットキーは止められないのでロゴを動かすと、スクロールできる時はスクロールする。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/69-6ab43119
Listed below are links to weblogs that reference
User JavaScriptの練習 - キーイベントで要素を動かす from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - キーイベントで要素を動かす

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。