1

jQueryによるキーボードショートカットによると、ページズームを作成したい。主に、ユーザーがページ上の要素をクリックしたときに、キーペアを使用してトリガーCtrlしたいと考えて+います。Wayからこのコード スニペットを試して、jQuery の質問で複数のキーを押して保持するイベントをトリガーしましたが、機能しません - ページをズームしませんCtrl-

$("#zoom").click(function() {

    var e = $.Event("keydown");
    e.which = 61; // # key code for +
    e.ctrlKey = true;
    $(document).trigger(e);

});
4

2 に答える 2

3

私のフィドルによると、あなたのイベントトリガーはうまく機能しているようです。

$(document).bind('keydown', function(e) {
    e.preventDefault();

    var d = new Date();
    $('#log').html(
        'time: ' + d.getTime() + '<br/>' +
        'key: ' + e.which + '<br/>' +
        'ctrl: ' + (e.ctrlKey ? 'Yes' : 'No')
    );
});

ただし、ブラウザのズームレベルを制御する方法を尋ねているようです。これは、プラグインなしのほとんどの (もしあれば) ブラウザでは不可能です。

CSS と Javascript を使用して独自のズームを実装し、上記のスニペットを使用してキャプチャすることもできますが、他の方法でユーザーがページをズームするのを防ぐことはできません。Ctrl +Ctrl -

CSS:

    .text-zoom-0{
        font-size: .75em;
    }
    .text-zoom-1{
        font-size: 1em;
    }
    .text-zoom-2{
        font-size: 1.25em;
    }

Javascript:

jQuery(function($) {
    var currentZoom = 1,
        minZoom = 0,
        maxZoom = 2,
        changeZoom = function(increase) {
            var newZoom = currentZoom;

            if (increase && currentZoom < maxZoom) {
                newZoom++;
                $('.text-zoom-' + currentZoom)
                    .addClass('.text-zoom-' + newZoom)
                    .removeClass('.text-zoom-' + currentZoom);
            } else if (currentZoom > minZoom) {
                newZoom--;
                $('.text-zoom-' + currentZoom)
                    .addClass('.text-zoom-' + newZoom)
                    .removeClass('.text-zoom-' + currentZoom);
            }

            currentZoom = newZoom;
        };

    $('.zoomIn').click(function(e) {
        changeZoom(true);
    });

    $('.zoomOut').click(function(e) {
        changeZoom(false);
    });
});

もちろん、画像、ナビゲーション、およびページ上の他のすべての要素についても同じことを行う必要があります。実際にこれを行いたい場合は、CSS についてこの小さなスニペットよりもはるかに賢くすることができますが、覚えておいてください。

于 2012-11-18T17:29:20.443 に答える
0

このライブラリを使用できます。たくさんの例があります

http://www.openjs.com/scripts/events/keyboard_shortcuts/

于 2012-11-18T17:18:47.550 に答える