5

我有一个使用 FlexSlider 的响应式滑块。我还希望每个滑块下的文本调整大小。FitText 不会在除第一张幻灯片之外的任何幻灯片上初始化，或者如果我调整窗口大小。我怎样才能使这项工作（没有 FOUC）？应该在 IE 8 和现代浏览器中工作。

http://jsfiddle.net/simply_simpy/adtVP/11/

HTML

    <div class="flexslider">
      <ul class="slides">
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/animals/" alt="" />
              <figcaption>
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/sports/" alt="" />
              <figcaption>
                <h1>uis nostrud exercitation ullamco </h1>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/people/" alt="" />
              <figcaption>
                <h1>ncididunt ut labore et dolore magna aliqua.</h1>
                <p>abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
      </ul>
    </div>​

CSS

    .flex-control-nav, .flex-control-paging {
        clear: both;
    }

    .flexslider {
        width: 100%;
    }

    .flexslider img {
      min-width: 100%;
    }
    h1 {
        font-size: 23px;
        width: 100%;
    }
    p {
        font-size: 16px;
        width: 100%;
    }
    .slides li {display: none}

JS 

$('.flexslider').flexslider();

$(".slides h1, .slides p").fitText();  ​
4

3 回答 3

2

希望这会有所帮助http://jsfiddle.net/adtVP/40/

路线图：

  1. 阅读关于fitText插件的 CSS 技巧的简短说明
  2. 采用 Paul Irish 的跨浏览器实现来修复resize不同浏览器中的事件

  3. 仅在此处从字体大小切换px到em（或任何其他相对值，如 %）：

    ...
h1 {
    font-size: .5em;
    width: 100%;
}
p {
   font-size: .2em;
   width: 100%;
}
...

    对合适文本的调用方式进行了一些修改

    $(".slides").fitText();

这基本上会更新父级元素上的字体大小，这将对em基于子级的字体产生影响，这就是整个想法。

每次使用 Paul 的代码段调整窗口大小时，也会调用 fit Text。

就是这样，编码很粗糙，需要清理和浏览，但可以工作。

UPD：来自 fitText 的 github 源代码由于 mime 类型不匹配而在 IE 中被阻止，这导致了问题。作为替代解决方案，您可以只在 js 文件中包含正确类型的源代码，这样就可以了。

旧的IE 不工作的例子在这里http://jsfiddle.net/adtVP/35/在这里记录一下，上面的新的用 IE 调试工具栏测试到 7 版本，肯定和真正的不一样浏览器，但到目前为止还不错。

于 2012-12-13T23:59:42.803 回答
0

The CSS for Flexslider hides all the li elements which are then shown by flexslider(), so the text the fitText() is targeting can't be evaluated, unless it is in the first, initially visible slide. I tried working around this by running this before Flexslider:

var slider = $('.flexslider'),
    hiddenSlides = slider.find('.slides > li:not(".slides > li.flex-active-slide")'),
    text = hiddenSlide.find('.text');

hiddenSlide.show();

text.fitText();

hiddenSlide.hide();

This solved the issue on load. I also tried wrapping this in a function and calling it on the resize event, however this didn't work for me. If anyone can fill in the blanks, that would be great.

于 2013-07-17T12:09:16.807 回答
0 
$('.flexslider').flexslider({
before: function(slider) {
    $(".slides h1, .slides p").css("color","#ffffff"); 

  },

after: function(slider) {
    $(".slides h1, .slides p").css("color","#000000"); 
    $(".slides h1, .slides p").fitText(); 

  }
});

 $(".slides h1, .slides p").fitText();
于 2012-12-09T19:54:17.300 回答