有没有办法让这样的效果呈现出来 ->
我想制作一个滑块/开关,用户可以拖动/滑动来改变不同的大小(或点)。
对于每个点,显示的文本会改变,就像我描述的图片一样。
我需要使用HTML5画布吗?还是有其他方法(也许使用js),以实现交互式切换/滑块手动调整字体大小,并且预览显示?
提前感谢!
![http://i.stack.imgur.com/IMkN3.png](https://istack.dev59.com/IMkN3.webp)
对于每个点,显示的文本会改变,就像我描述的图片一样。
我需要使用HTML5画布吗?还是有其他方法(也许使用js),以实现交互式切换/滑块手动调整字体大小,并且预览显示?
提前感谢!
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...
});
<div id="slider"></div>
然后在你的JavaScript中加入类似这样的内容:
$( ".slider" ).slider({
change: function( event, ui ) {
$(<text div selector>).css("font-size",(ui.value+"px"));
}
});