我正在尝试使用FitText jquery插件来调整一些文本的大小。问题在于,只有在窗口调整大小事件后文本才会被放大。
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
看起来脚本最初至少会调用“resizer”函数。这里我有什么遗漏吗?
以下是我使用该脚本的方式:
<script src="/js/jquery.fittext.js"></script>
<script type="text/javascript">
$("h1").fitText(.6);
</script>
</body>
我对这个东西还很陌生,只是试图把东西拼凑在一起,所以任何帮助都将不胜感激。
编辑
我在描述问题时应该更加具体。我试图在FlexSlider的标题框中使用FitText。我能够让Ankit下面的例子运行起来,但FlexSlider的标题文本仍然不正确。我认为必要的滑块元素没有及时加载,无法使FitText生效。我通过以下可怕的代码解决了这个问题:
<script type="text/javascript">
$(document).ready(function() {
$('#spinner').hide();
setTimeout( function() { $("h1").fitText(.6); }, 200 );
setTimeout( function() { $("h1").fitText(.6); }, 300 );
setTimeout( function() { $("h1").fitText(.6); }, 500 );
setTimeout( function() { $("h1").fitText(.6); }, 700 );
setTimeout( function() { $("h1").fitText(.6); }, 1500 );
});
</script>
我知道这可能是最简单的方法,但我的文本现在可以按照预期进行调整大小。如果有更好的建议,请告诉我。