根据我的小提琴,您的事件触发器似乎工作得很好。
$(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,但请记住,可以与任何想象中的应该不一样......