sIFR 3是否与jQuery Cycle Plugin兼容?

时间:2009-09-21 19:24:37

标签: jquery sifr

我是新手,我一直在努力解决这个问题。我尝试使用jQuery Cycle Plugin和滚动div中的sIFR 3文本创建一个滚动div。我可以让它在Firefox中正常工作,就是这样。任何建议或帮助将不胜感激!

这是我的链接:http://dev.bandspecial.com/test.html

jQuery的:

$(document).ready(function() {
$('#slideshow').cycle({
    fx: 'scrollLeft',
    cleartypeNoBg:  true
});
});

sIFR的:

sIFR.replace(rockwell, {
 selector: 'h1',
      css: [ '.sIFR-root { color:#ffffff; }' ,'a { text-decoration: none }' ,'a:link { color: #E31824 }' ,'a:hover { color: #E31824 }' ], wmode: 'transparent'
    });

身体代码:

<div id="slideshow">
  <div> <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" height="200" width="200">
    <h1>St Andrews State Park - Panama City, FL</h1>
    <p>This park is one of the most popular outdoor recreation spots in Florida. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" height="200" width="200">
    <h1>Located in the Florida panhandle,</h1>
    <p> the 1,260 acre park is situated on a scenic peninsula and is well known for its sugar white sands and brilliant blue water. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" height="200" width="200">
    <h1>The ocean provides opportunity for endless fun. </h1>
    <p>From boogie boarding to snorkeling to  swimming and boating, there is always something to do.</p>
  </div>
</div>

4 个答案:

答案 0 :(得分:2)

我调整了汤姆的代码。虽然他的代码对我有用,但它可以在(淡入淡出)效果之后显着地呈现sifr。使用before和display块,sifr在效果之前呈现,以获得更理想的结果。

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        before: function(){
            $(this).css({ 'display': 'block' })
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
       }
    });
});

答案 1 :(得分:1)

我使用Innerfade Jquery插件,因此更改可能会略有不同。

这是我做的:

Innerfade使用.hide()隐藏列表中的所有项目。这是问题的根源。 解决方案:使用.hide()并定义CSS .addClass("hide"),而不是让您的插件使用position: absolute; left:-10000px

使用此方法。 .removeClass("hide")会让您的帖子再次显示。除此之外,如果您使用的是淡入淡出或幻灯片等效果,请不要忘记removeClass

我希望这是有道理的。顺便说一句:我正在使用SIFR 3

答案 2 :(得分:0)

如果您隐藏的div正在尝试滚动以显示:none;在页面加载时,sifr不会替换该文本。

答案 3 :(得分:0)

我使用jquery循环选项'after'在每次转换完成后调用sIFR函数:

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        after: function(){
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
        }
    });
});