可以使用jquery-ui调整文本大小吗？

p标签中的html文本是否可以使用jquery-uiresize，或者div标签中没有p标签可resize？ 我已经使用jquery ui从以下示例调整了图像的大小，但是文本没有resizehttp://jqueryui.com/demos/resizable/ 。

Answer 1

您可以使用resize事件处理程序。 诀窍是如何计算新的字体大小。 检查此解决方案作为变体：

HTML：

 
Resizable
 
Quis non magna sagittis, et cras tortor nunc? Enim, lectus et quis penatibus enim augue eros, dis sit sit urna cras placerat sociis porta
  

使用Javascript：

 var initDiagonal; var initFontSize; $(function() { $("#resizable").resizable({ alsoResize: '#content', create: function(event, ui) { initDiagonal = getContentDiagonal(); initFontSize = parseInt($("#content").css("font-size")); }, resize: function(e, ui) { var newDiagonal = getContentDiagonal(); var ratio = newDiagonal / initDiagonal; $("#content").css("font-size", initFontSize + ratio * 3); } }); }); function getContentDiagonal() { var contentWidth = $("#content").width(); var contentHeight = $("#content").height(); return contentWidth * contentWidth + contentHeight * contentHeight; } 

您可以在jsFiddle： jsFiddle链接中查看此解决方案

Answer 2

文本大小调整与jQuery无关。 但是，您可以将CSS属性绑定到滑块。

 $('#slideBar').slider({ startValue: 12, minValue: 0, maxValue: 100, stop: function(e, ui) { $("#text").css({fontSize: ui.value + 8}); } });