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

is there any way I can make this -->

所以我想制作一个滑块/切换器 用户可以拖动/滑动它来改变不同的大小（或点）

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

我使用 HTML5 画布吗？ 或者有什么方法（也许用js，实现交互式切换/滑块手动调整字体大小）用于显示预览？

先感谢您！

您只需使用即可实现此目的纯 HTML5和 JavaScript。

HTML5 有一个输入类型称为range http://www.w3.org/wiki/HTML/Elements/input/range，并且它的行为与您想要的示例完全一样。

请注意，根据 CanIUse，实际主要浏览器支持input[type="range"] is: IE10+, FF23+ and 铬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/ http://jsfiddle.net/vNfh2/1/