p标签中的html文本是否可以使用jquery-ui调整大小,或者div标签中没有p标签可调整大小?我已经使用jquery ui从以下示例调整了图像的大小,但是文本没有调整大小
http://jqueryui.com/demos/resizable/.
解决方法
您可以使用resize事件处理程序.诀窍是如何计算新的字体大小.检查此解决方案作为变体:
HTML:
<div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> <div id="content">Quis non magna sagittis,et cras tortor nunc? Enim,lectus et quis penatibus enim augue eros,dis sit sit urna cras placerat sociis porta</div> </div>
使用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 link中查看此解决方案
原文地址:https://www.jb51.cc/jquery/181502.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。