javascript - 您好，非 ie 浏览器中的字幕延迟

Question

更新:看起来它实际上在 Internet Explorer 中被延迟了。

更新:它似乎比看起来要早开始，只是文本从屏幕最右侧开始滚动，并且文本具有白色，背景也是如此 - 而且它只应该显示在屏幕中间的黄色矩形中。有人能帮助我如何从“aamirafridi-jQuery.Marquee-304ed30 插件”获取这个 javacript marquee 插件来启动该黄色框内的文本滚动，并且让文本滚动仅在该黄色框内在屏幕中间？

我正在使用选取框标签，从右向左滚动新闻提要，因为它很紧张，我尝试实现“aamirafridi-jQuery.Marquee-304ed30 插件”，来自此 site ，问题是在 IE 中它会立即启动，但在 Firefox 或 google chrome 中它会延迟，我可以减少 marquee 函数中的 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 和 Google Chrome 中似乎也出现了延迟。

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

编辑:我已经使用我正在尝试的最新版本更新了 javascript 代码，以及它周围的一些代码。

Answer 1

尝试我自己为这个问题制作的插件。在 Firefox、Chrome 和 Opera 中测试。

Fiddle

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'
});

<小时/>

尝试以下 fiddle 并根据需要选择适合您的:

1. Fiddle1

2.Fiddle2

3.Fiddle3

注意:对于上述三个 fiddle ，除了 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'
});
});