-1

基本的に、Web ページの上隅に小さな画像を作成しようとしています。この画像は、ページがスクロールされても同じ位置に留まり、マウスの位置を示します。

要点は、下と右に広がる大きな Web ページを作成することです。この大きなページのナビゲーションは、訪問者がこのページのどこにいるかを正確に示す小さな画像があれば簡単になります (ブラウザー ウィンドウはページよりも小さいため)。 ）。Webページ上のブラウザウィンドウの位置を追跡したかったのですが、それを行うのに役立つものが見つからなかったので、マウスの動きだけでできると思いました. 問題は、私がJavaについて何も知らないということです。そのため、ブラウザではなくページ上でマウスの位置を追跡し、ブラウザの上隅にある小さな画像に同時に表示する方法を知っている人はいますか?

4

1 に答える 1

0

これは機能しますが、css3 変換 (スケール) をサポートする最新のブラウザーでのみ機能します。

Jsフィドル

.actual-page div にあるはずのページ全体を、ページの左上に配置されている .thumbnail div にコピーすることで機能します。次に、複製したページを css 変換でスケーリングし、javascript を使用してマウスの動きを小さなボックスに複製します。スクリプトは次のとおりです。

var TinyNav = function() {
    this.init = function() {
        var clone = $('.actual-page').clone();
        $('.thumbnail').append(clone);
        $('.actual-page').on('mousemove', function(e) {
            var posX = e.offsetX;
            var posY = e.offsetY;
            $('.thumbnail .cursor').css({
                top: posY / 10,
                left: posX / 10
            });
        });
    }

    this.init();
}

var tinyNav = new TinyNav();

それを行う別の方法はキャンバスを使用することですが、ブラウザのサポートもそれで最善ではありません..これが役立つことを願っています

于 2013-07-17T08:28:25.030 に答える