32068


リンクの演出として実現したいことがあり投稿させていただきました。  
実現したいことは下記の通りです。

  1. リンク要素にロールオーバーした際に画面全体を拡大表示（アニメーション不要）
  2. 拡大された際に該当リンク要素＋マウスが画面中央に来るように
  3. リンク要素にマウスが乗っているあいだは（画面全体含めて）マウスの動きに追従（アニメーション不要）
  4. リンク要素からマウスが外れたら標準表示（拡大率1.0）に戻る

**解決したい問題**  
上記「2」以降の実装。  
以下に現状のコードを示します。

Sass（scss）

[code]

    @import "compass";
    .zoom {
        @include scale(2);
    }
    
[/code]

JavaScript（jquery-3.1.1.min使用）

[code]

    var main =
    {
        handlerInOutHandler: function(e)
        {
            $('body').toggleClass('zoom');
        }
    };
    $(function()
    {
        $('a').on('mouseenter mouseleave', main.handlerInOutHandler);
    });
    
[/code]

以上、ご教授いただけますと幸いです。  
どうぞよろしくお願いいたします。


CC BY-SA 3.0
2017-01-22T12:13:14.363
32054
2017-01-23T04:01:38.827
2017-01-23T03:35:03.067
18487
18487
question
javascript jquery css
ロールオーバーした要素を起点に（画面全体含めて）マウスに追従させたい


最初にコメントに書いた通り、`transform-origin`の問題だと思われます。

質問のコードでは変形の原点である`transform-
origin`が明示されていないため、`transform`は`body`要素の中心を基準として適用されます。このため`a`要素にマウスをホバーし、`transform`が適用された瞬間に`a`要素の位置が変わり、結果としてすぐに`onmouseleave`が発生することになります。

これに対処するためには`onmouseenter`で`a`の場所に応じた`transform-
origin`を設定してやる必要があります。例えばカーソル位置(`e.clientX`, `e.clientY`)を基準にするのであれば

[code]

    $('a').on('mouseenter', function (e) {
        var p = $('body').offset();
        var w = $('body').width();
        var h = $('body').height();
        var xr = (e.clientX - p.left) / w;
        var yr = (e.clientY - p.top) / h;
        var origin = (100 * xr).toString() + '% ' + 100 * yr + '%';
        $('body').addClass('zoom').css({
            '-webkit-transform-origin': origin,
            'transform-origin': origin
        });
    });
    
[/code]

のように計算してやる必要があります。上では単位に`%`を使用していますが、`px`でもよいです。またリンクの中心(`$(this).offset().left
+ $(this).width() / 2`)を基準とすることもできます。


CC BY-SA 3.0
2017-01-23T04:01:38.827
32068
2017-01-23T04:01:38.827
5750
32054
answer