Question

我想创建页面缩放 - 根据jQuery的键盘快捷键。主要是，当用户点击页面上的某个元素时，我想使用Ctrl和+ Ctrl来触发- $("#zoom").click(function() { var e = $.Event("keydown"); e.which = 61; // # key code for + e.ctrlKey = true; $(document).trigger(e); });。我从Way to trigger multiple keypress and hold events in jQuery问题尝试了此代码段，但它不起作用 - 它不会缩放页面

{{1}}

Answer 1

根据我的fiddle，您的事件触发器似乎运行正常。

$(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，但请记住，可能与应该的任何一段都不一样想象力......

Answer 2

您可以使用此库。有很多例子

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

触发多个按键以激发键盘快捷键jquery

2 个答案: