Fiddle

Question

更新：看来它确实在Internet Explorer中延迟了。

更新：看起来似乎很快就开始了，只是文本开始从屏幕的最右边滚动，文本有白色，背景也是如此 - 它只是应该出现在屏幕中间的黄色矩形中。有没有人能够帮助我如何从'aamirafridi-jQuery.Marquee-304ed30插件'获取这个javacript选框插件来启动文本在该黄色框内滚动，并让文本滚动只在那个黄色框内在屏幕中间？

我正在使用选框标记，从右到左滚动新闻源，因为它很紧张，我尝试从这个site实现'aamirafridi-jQuery.Marquee-304ed30插件'，问题是它在IE中立即启动，但在firefox或谷歌浏览器中它被延迟，我可以减少选框函数中的duration参数（参见下面的代码），使其更快启动，但随后文本滚动太快如果我毫不拖延地表明它。我一直试图找出一个解决方案，但没有设法，有没有人有任何建议？非常感谢。三江源。

我有这段代码：

function UR_Start() {
    UR_Nu = new Date;
UR_Indhold = showFilled(UR_Nu);
UR_Indhold = UR_Indhold.substring(0, UR_Indhold.indexOf("GMT"));
document.getElementById("ur").innerHTML = UR_Indhold;

    //document.getElementById("marquee").innerHTML = window.rssContent;
$('.marquee').marquee({duration: 15000, delayBeforeStart: 0, direction: 'left'});
    initMarquee();
    load();
}
}

function load() {
    UR_Nu = new Date;
UR_Indhold = showFilled(UR_Nu);
UR_Indhold = UR_Indhold.substring(0, UR_Indhold.indexOf("GMT"));
document.getElementById("ur").innerHTML = UR_Indhold;
setTimeout("load()", 1000);
}

function initMarquee() {
    setTimeout("initMarquee()", 30000);
$('.marquee').marquee({duration: 15000, delayBeforeStart: 0, direction: 'left'});
}

和html：

<div class="container-fluid" style="padding: 5px 20px">

    <div class="well" style="background-color: <?php echo $layout_setting[2][value]; ?>; font-size:large; font-weight:bold;">

        <div id="marquee" class="marquee" class="marquee" style="white-space: nowrap; padding: 0 1em; overflow-style: marquee; marquee-style: scroll; marquee-loop: infinite; overflow-x: -webkit-marquee; width: 96%; -webkit-marquee-repetition: infinite; color: <?php echo $layout_setting[7][value] ?>" >

            <?php echo $rssContent; ?>

        </div>
    </div>
</div>

更新：实际上，似乎延迟发生在Internet Explorer中，以及Firefox和谷歌浏览器。

编辑：我已经更新了html，现在使用php来填充选框div，而不是在页面加载后使用javascript来操作html dom。

编辑：我已经使用我正在尝试的最新版本更新了javascript代码，并附带了一些代码。

Answer 1

尝试使用我为此问题制作的插件。使用Firefox，Chrome和＆戏。

Fiddle

小提琴中使用的插件代码

/*Start of Plugin*/
(function( $ ) {
$.fn.marquee = function(params){
    params = $.extend( {direction : 'left',duration : '2000', delayStart : '0'}, params);
    var duration = parseInt(params.duration);
    var delay = parseInt(params.delayStart);

    var par = $(this);
    par.wrapInner('<span></span>');

    var parCh = par.children('span');
    var leftMargin = parCh.css('margin-left').replace('px','');
    var rightMargin = par.innerWidth()-leftMargin-parCh.width();

    function dirRight(){
        parCh.css({'margin-left':''+leftMargin+'px'});
        parCh.animate({
              'margin-left':''+rightMargin+'px'
            },duration,
              'linear',
            function(){
              dirRight();
            });
    }

    function dirLeft(){
        parCh.css({'margin-left':''+rightMargin+'px'});
        parCh.animate({
               'margin-left':''+leftMargin+'px'
            },duration,
              'linear',
            function(){
              dirLeft();
            });
    }

    if(params.direction == 'right'){
        setTimeout(function(){dirRight()},delay);
    }
    if(params.direction == 'left'){
        parCh.css({'margin-left':''+rightMargin+'px'});
        setTimeout(function(){dirLeft()},delay);
    }

    $(window).resize(function(){
        rightMargin = par.innerWidth()-leftMargin-parCh.width();
    });
};}( jQuery ));
/*End of Plugin*/

/*Call plugin*/
$('.marquee').marquee({
    //Set the direction of marquee
    'direction':'left',

    //delay the start of marquee
    'delayStart':'0',

    //Set the duration of marquee in millisecond
    'duration':'8000'
});

尝试下面的小提琴并根据需要选择适合您的方式：

1. Fiddle1

2. Fiddle2

3. Fiddle3

注意：对于除jQuery更改之外的上述三个小提琴，我还更改了.marquee的CSS，如下所示：

.marquee {
    white-space: nowrap;
    width: 100%;
    color: #000;
    overflow:hidden;
}

提示：如果您希望在文档完全加载时启动选取框，请在$(document).ready(function(){ ... })内编写插件调用：

$(document).ready(function(){
$('.marquee').marquee({
    //Set the direction of marquee
    'direction':'left',

    //delay the start of marquee
    'delayStart':'0',

    //Set the duration of marquee in millisecond
    'duration':'8000'
});
});

嗨，非ie浏览器的字幕延迟

1 个答案:

Fiddle

小提琴中使用的插件代码

1. Fiddle1

2. Fiddle2

3. Fiddle3