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

Question

有什么办法可以做到这一点-->

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

并且对于每个点，显示的文本都会像我描述的图片一样发生变化

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

先感谢您！

score 7 · Accepted Answer

您可以使用纯 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/

score 0 · Accepted Answer

您可以使用 jQueryUI 的滑块很容易地做到这一点。

这是网页jQueryUI Slider的链接。

在您的 HTML 中为滑块添加一些内容，

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

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

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

2 回答 2