如何使用HTML CSS JS创建滑块/切换以更改屏幕上的字体大小 [英] How To create slider/toggle to change font size on screen with HTML CSS JS

问题描述

有什么办法可以使它->

is there any way I can make this -->

所以我想做一个滑块/切换并且用户可以拖动/滑动它以更改为其他大小(或点)

so I'd like to make a slider/toggle and user can drag/slide it to change into different size (or point)

，并且对于每个点，显示的文本都会更改就像我描述的图片一样

and for each point, the displayed text is changed just like the picture I describe

我使用HTML5画布吗?还是有什么方法(也许用js来实现交互式的切换/滑动器手动调整字体大小)来进行显示预览?

do I use HTML5 canvas? Or is there any way (maybe with js, to achieve that interactive toggle/slider manually adjust font size) for display preview?

先谢谢您！

推荐答案

您可以仅使用纯HTML5 和JavaScript来实现.

You can achieve this using just plain HTML5 and JavaScript.

HTML5的输入类型为 range ，它的行为完全正确如您所想的那样.

HTML5 has an input type called range, and it behaves exactly as you want for this example.

请注意，根据CanIUse，对 input [type ="range"] 的实际主要浏览器支持是: IE10 + ， FF23 + 和 Chrome 5 + .

Note that according to CanIUse, the actual major browser support for input[type="range"] is: IE10+, FF23+ and Chrome 5+.

要实现所需的功能，首先应创建元素:

To achieve what you want you should first create the element:

<input type="range" min="12" max="42" id="slider" />

，然后用js监听它的变化(我在下面的示例中使用jQuery):

and then listen to its changes with js (I'm using jQuery for the example bellow):

$('#slider').on('change',function(){
    var val = $(this).val();
    //do the rest of the action...
});

这是您想要的工作示例: http://jsfiddle.net/vNfh2/1/

Here is a working example of what you want: http://jsfiddle.net/vNfh2/1/

这篇关于如何使用HTML CSS JS创建滑块/切换以更改屏幕上的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！