Home > スポンサー広告 > User JavaScriptの練習 - 要素の上に要素を重ねる

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/68-74cbd06c
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を練習してます。

マウスを乗せた要素の上に要素を重ねる

マウスを乗せた要素の上に要素と同じ大きさのマスクを被せて、わずかのうちにマスクを消す。

要素の上に要素のマスクを乗せたところ

マウスカーソルの下の透明度のある黒色の矩形がマスク。

// ==UserScript==
// @include *
// @exclude
// ==/UserScript==

document.addEventListener('load', function() {
    var timer;
    // 要素に被せる要素を作成
    var tooltip = document.createElement('div');
    tooltip.setAttribute( 'style', 'background-color : black; z-index : 100; position : absolute; opacity : 0.5; display : none;' );
    document.body.appendChild(tooltip);
    // すべての要素にイベントリスナーをセット
    all = document.getElementsByTagName( '*' );
    for ( var i=0 ; i < all.length; i++ ) {
         all[i].addEventListener('mouseover', moveTooltip, false);
    }

    function moveTooltip(e){
        var x = 0;
        var y = 0;
        var elm = e.target;
        // 要素の大きさ
        tooltip.style.width = elm.offsetWidth + 'px';
        tooltip.style.height  = elm.offsetHeight + 'px';
        // 要素の座標
        while ( elm) {
        x += elm.offsetLeft;
        y += elm.offsetTop;
        elm = elm.offsetParent;
        }
        tooltip.style.left = x + 'px';
        tooltip.style.top  = y + 'px';
        tooltip.style.display = '';
        // 被せた要素を消すタイマー
        clearTimeout(timer);
        timer = setTimeout(function() { tooltip.style.display = 'none' }, 2000);
    }
}, false);
offsetHeight
配置に応じた要素の高さ。
offsetLeft
要素の左ボーダーから offsetParent の左ボーダーまでの距離。
offsetParent
すべてのオフセット計算の基準となっている要素。
offsetTop
要素の上ボーダーから offsetParent の上ボーダーまでの距離。
offsetWidth
配置に応じた要素の幅。

DOM:element - MDC

offsetLeft, offsetTopは offsetParentからの距離だから、ページ上の座標を得るために一番上の要素までさかのぼる必要がある。

while ( elm) {
x += elm.offsetLeft;
y += elm.offsetTop;
elm = elm.offsetParent;
}

短時間のうちにマスクを消す

timer = setTimeout(function() { tooltip.style.display = 'none' }, 2000);

参考にしたサイト

anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/68-74cbd06c
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。