4

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

看起来脚本最初至少调用了一次“调整大小”函数。我在这里错过了什么吗？

这就是我使用脚本的方式：

<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>

我知道这一定是黑客攻击，但我的文本现在可以根据需要调整大小。如果有人可以提出更好的方法，我会全力以赴。

4

3 回答 3

2

如果有人感兴趣，您现在可以使用 flexslider 回调来解决这个问题，如下所示：

$('.flexslider').flexslider({
  animationLoop: true,
  directionNav: false,
  start: function(){$(".fittext").fitText();},
  after: function(){$(".fittext").fitText();}
});
于 2012-08-03T02:10:47.560 回答
1

您可能希望在内容加载后添加此 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>
于 2012-04-09T19:14:48.113 回答
1

对于那些仍然有问题的人，这个修复对我有用

替换里面的这段代码jquery.fittext.js

// Call once to set.
resizer();

有了这段代码，

$(window).load(function(){
    resizer();
});
于 2014-02-10T12:06:20.947 回答