如何使用HTML CSS JS创建滑块/切换以更改屏幕上的字体大小

Question

有什么办法可以使我->

所以我想做一个滑块/切换，用户可以拖动/滑动它来改变大小（或指向）

对于每一点，显示的文字都会发生变化，就像我描述的图片一样

如何使用HTML5画布？还是有什么方法（也许用js来实现交互式切换/滑块手动调整字体大小）来进行显示预览？

先感谢您！

Answer 1

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

HTML5具有一个名为range的输入类型，并且其行为与本示例一样。

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

要实现您想要的目标，您首先应该创建元素：

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

然后用js监听它的变化（我在下面的示例中使用jQuery）：

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

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