Question

我正在尝试使用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>

我知道这肯定是黑客攻击，但我的文字现在按照需要调整大小。如果有人能提出更好的方法，我会全力以赴。

Answer 1

如果有人感兴趣，你可以使用像这样的flexslider回调来解决这个问题：

$('.flexslider').flexslider({
  animationLoop: true,
  directionNav: false,
  start: function(){$(".fittext").fitText();},
  after: function(){$(".fittext").fitText();}
});

Answer 2

您可能希望在加载内容后添加此javascript。尝试在关闭body标签之前添加脚本标记并查看它是否有效

编辑：一个适合我的简单示例：

    <html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
  </head>
  <body>
    <h1>This is test</h1>
    <script type="text/javascript">
          $("h1").fitText(0.6);
    </script>
  </body>
</html>

Answer 3

对于仍有问题的人，此修复程序适用于我

在jquery.fittext.js

中替换此代码

// Call once to set.
resizer();

使用此代码，

$(window).load(function(){
    resizer();
});

使用FitText jquery插件调整文本大小

3 个答案: