Question

我正在尝试在网页上创建一个按钮来增加页面大小，字体大小图像大小等。这是针对特殊需求的学校网站，以使其更易于访问。网站是www.applefieldsschool.co.uk。请注意，这是一项正在进行的工作。

到目前为止，我已设法提出这个问题; -

<button onclick="body.style.zoom='300%'">Zoom 300%</button>

这可以工作，但只是放大页面上呈现的内容并且没有响应。我的页面是HTML5和CSS3，响应不同的视口大小等。

如果我使用键盘快捷键Ctrl +和Ctrl-这完全符合我的需要。我现在需要编写一个按钮来使用键盘快捷键。

可悲的是，这有点超出了我的javascript技能（我只是在上周开始玩的时候），提前致谢。

Answer 1

无法告诉您的浏览器“使用 CTRL + + 键”。

Here is another thread which lists some possible alternatives。特别是：

body {
   transform: scale(1.1);
   transform-origin: 10% 10%;
   // add prefixed versions too.
}

您也可以设置font-size。除非你在em中完成了所有相对于字体大小的尺寸，否则这不会真正缩放页面，但它会（显然会改变字体的大小（可能仍然可以接受）为你）。

Answer 2

你可以试试这个：

var value = event.keyCode;

从onkeydown="keyCode(event);"

调用它

以下是密钥代码列表： http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 3

我猜缩放是特定于浏览器的（如果我错了，请纠正我）我建议添加多个样式，您可以在网站上添加并自己定义。

例如，一些CSS

/*default -no styles*/
body
{
   font-size: 14px;
}

body.big
{
   font-size: 20px;
}

body.omg
{
   font-size: 25px;
}

body.omg img
{
    width: 150%;
}

这样做的痛苦是，只有文本会被放大。您必须处理某些项目才能使它们看起来更大。与示例中的<img>类似。

然后你可以点击按钮点击样式（你应该使用像jQuery这样的东西来使它更干净......）

<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button> 

<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button>

使用jQuery：http://jsfiddle.net/9DCry/

在一个工作示例中更新

需要 - 在Web浏览器中使用Ctrl +和 - 键盘快捷键的Javascript按钮

3 个答案: