如何使用 HTML、CSS 和 JS 创建滑动/切换按钮以在屏幕上更改字体大小

Question

有没有办法让这样的效果呈现出来 -> 我想制作一个滑块/开关，用户可以拖动/滑动来改变不同的大小（或点）。

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

我需要使用HTML5画布吗？还是有其他方法（也许使用js），以实现交互式切换/滑块手动调整字体大小，并且预览显示？

提前感谢！

- Skinny Totoro

---

你可以使用纯JavaScript来完成这个任务。 - adamjc

http://jsfiddle.net/j08691/P6ExK/ - j08691

@j08691 先生，您好。请问能否针对每个字体大小添加不同的文本？比如当字体大小在12-18px之间时，显示"小字体大小"的文本；当滑块拖动到24-48px之间时，则显示"大字体大小!"的文本，是否可行？谢谢您的帮助！ - Skinny Totoro

当然，这很容易做到。 - j08691

@j08691，你能帮我吗？因为我刚刚把整个脚本搞砸了 :/ - Skinny Totoro

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/

- Claudio Holanda

---

你应该在这里包含jQuery代码，并提供jsFiddle链接以供参考。 - Petr R.

您还需要指出 type="range" 在 IE9 及以下版本中不受支持。 - Bojangles

有没有办法在滑动时更改文本大小，而不是在释放鼠标后更改？ - whackamadoodle3000

@whackamadoodle3000，将事件change更改为input。示例 - Claudio Holanda

Answer 2

你可以很容易地使用jQueryUI的滑块来完成这个任务。

这是一个链接到网页jQueryUI Slider的链接。

在你的HTML中放置滑块内容，

<div id="slider"></div>

然后在你的JavaScript中加入类似这样的内容：

$( ".slider" ).slider({
  change: function( event, ui ) {
    $(<text div selector>).css("font-size",(ui.value+"px"));
  }
});

- StoicJester