Привет, задержка выделения в браузерах, отличных от ie

Обновление: кажется, что это действительно задерживается в Internet Explorer.

Обновление: кажется, что оно начинается раньше, чем казалось, просто текст начинает прокручиваться с крайней правой части экрана, а текст имеет белый цвет, как и фон, и он должен отображаться только желтым. прямоугольник посередине экрана. Может ли кто-нибудь помочь мне с тем, как получить этот плагин javacript marquee из плагина aamirafridi-jQuery.Marquee-304ed30, чтобы начать прокрутку текста внутри этого желтого поля, и чтобы прокрутка текста была только внутри этого желтого поля, которое находится посередине экрана?

Я использую тег marquee для прокрутки новостных лент справа налево, и, поскольку это нервно, я попытался реализовать «плагин aamirafridi-jQuery.Marquee-304ed30» из этого site, проблема в том, что в IE запускается сразу, а в firefox или google chrome с задержкой, я могу уменьшить параметр 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 для заполнения marquee div вместо использования javascript для управления html dom после загрузки страницы.

Изменить: я обновил код javascript самой новой версией того, что я пытаюсь сделать, с некоторым кодом вокруг него.


javascript html jquery internet-explorer marquee
person user1296259    schedule 30.01.2014    source источник
comment
Также появляется, что прокрутка приостанавливается на долю секунды каждые 7 секунд или около того.   -  person user1296259    schedule 31.01.2014
comment
Может ли какая-либо из этих проблем быть связана с тем, что часть веб-страницы перезагружается каждую секунду, чтобы обновить часы, которые показывают секунды?   -  person user1296259    schedule 31.01.2014
comment
Сначала это звучит как проблема setInterval, когда функция не срабатывает до тех пор, пока не пройдет первый интервал времени. Возможно, вам придется запустить одну бегущую строку с интервалом в ноль секунд, а затем она подберет остальные позже.   -  person ntgCleaner    schedule 04.02.2014
comment
Во-первых, изменение продолжительности изменит время прокрутки. Существует delayBeforeStart, который должен контролировать, сколько времени требуется для запуска. Кажется, что у вас уже установлено значение 0, так что проблема не в этом. Я предполагаю, что это может быть связано с тем, что событие загрузки страниц запускается в разных браузерах.   -  person Tarwin Stroh-Spijer    schedule 04.02.2014
comment
Этот jsfiddle, который я только что создал на основе вашего кода, не имеет задержки в Chrome 32: jsfiddle.net/bZkBu   -  person photodow    schedule 04.02.2014
comment
Как вы кормите rssContent? Если вы используете Ajax, ваша задержка может быть связана с загрузкой или добавлением данных в DOM.   -  person photodow    schedule 04.02.2014
comment
Photodow: я только что перешел на использование php вместо ajax, но он все еще имеет отложенный запуск.   -  person user1296259    schedule 04.02.2014
comment
Я обновил вопрос новыми деталями, и некоторые вещи немного изменились, например, Internet Explorer все еще немного задерживается, и я использую php для заполнения marquee div, и я показываю свой последний код javascript с некоторыми из код вокруг него тоже.   -  person user1296259    schedule 04.02.2014
comment
С параметром продолжительности кажется, что чем выше число, тем медленнее скользит бегунок новостной ленты и тем больше времени требуется, чтобы начать прокрутку — и чем меньше число, тем быстрее это происходит и занимает меньше времени. Прямо сейчас, при использовании 15000 для длительности, запуск занимает около 4 секунд — и скорость не так уж плоха. Я пытаюсь заставить его начинаться с 0 секунд, а скорость прокрутки не слишком высока.   -  person user1296259    schedule 04.02.2014
comment
хорошо - я изменил цвет текста в выделенном div (который был белым), и часть проблемы в том, что он начинает прокручиваться с правой стороны экрана, хотя он должен начинаться с правой стороны желтого поля в середине экрана, а не в дальней правой части экрана.   -  person user1296259    schedule 05.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте плагин, который я сделал сам для этого вопроса. Проверено в Firefox, Chrome и Opera.

Скрипка

Код плагина, используемый в скрипке

/*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, я также изменил CSS для .marquee, как показано ниже:

.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'
});
});
person Zword    schedule 06.02.2014
comment
Спасибо. Это почти решает мою проблему, но я хочу, чтобы текст начал прокручиваться с дальней стороны моего желтого блока, а не полностью отображался в моем желтом блоке. - person user1296259; 06.02.2014
comment
Я попытался заставить текст начать прокручиваться с правой части моего div, изменив строку в вашей функции dirRight с parCh.css({'margin-left' : '' + leftMargin + 'px'}); на parCh.css({'margin-left' : '' + leftMargin + par.width() + 'px'});, но это заставляет его начинать далеко вправо. И кажется, что когда я использую alert для par.width(), это дает 906, и par.innerWidth() или par.outWidth(), они оба равны 942. Но из экспериментов кажется, что мой div для выделения на самом деле около 500, но я не хочу использовать константу, потому что что, если это изменится. мне нужна реальная ширина - person user1296259; 06.02.2014
comment
Хорошо, я опубликую обновленную скрипку. Проверьте наличие обновлений. - person Zword; 06.02.2014
comment
@user1296259 user1296259 я добавил три новых скрипки внизу ответа. Проверьте их - person Zword; 06.02.2014
comment
@ user1296259 я получаю правильную ширину div при предупреждении. Проверьте это jsfiddle.net/Zword/bZkBu/20 . Кстати, вы проверили мой обновленный ответ с тремя скрипками? - person Zword; 06.02.2014
comment
Я проверил ваши плагины, но они не работали, и у меня все еще возникают проблемы с получением правильной ширины, которую мне нужно изменить в вашем ответе, чтобы решить мою проблему. Кстати, эта проблема привела меня к созданию нового вопроса: заголовок stackoverflow.com/questions/21611578/, если вы можете решить этот новый вопрос для меня, и это позволит мне решить эту проблему, во что я верю будет, я вознагражу вас за ответ, и вы получите награду в 50 баллов. - person user1296259; 06.02.2014
comment
Эй, в другом вопросе, который вы опубликовали, вы удалили .marquee div, который присутствует в моих скриптах HTML. поэтому вы должны использовать .well вместо .marquee в jQuery. Проверьте мой ответ на другой вопрос - person Zword; 06.02.2014
comment
Отсутствующий .marquee div в моем другом вопросе был ошибкой, я обновил вопрос и прокомментировал ваш ответ на другой вопрос. Извини за это. - person user1296259; 06.02.2014
comment
Кажется, теперь это работает, по какой-то причине добавление par.with() теперь работает. - person user1296259; 07.02.2014
comment
Спасибо за помощь. Я наградил вас наградой в 50 баллов. - person user1296259; 07.02.2014
comment
Приятно видеть, что, наконец, ты понял - person Zword; 07.02.2014