1

我想创建页面缩放 - 根据 jQuery 的键盘快捷键。主要是，当用户单击页面上的某个元素时，我想Ctrl使用+和Ctrl使用键对触发。我已经尝试过Way to trigger multiple keypress and hold events in jQuery- question中的这个代码片段，但它不起作用 - 它不会缩放页面

$("#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 回答