2014-09-16 3 views
5

Это демо в jsfiddle, demoJavascript, как установить интервал времени, чтобы остановить прокрутку

То, что я хочу, пусть прокручиваются пункты («один», «два», «три», «4», " 5 ',' 6 ',' 7 ') автоматически прокручивается вверх, как показано в демонстрации, и останавливается на 2 секунды, когда находится в среднем положении. Но в моей демонстрации он будет ласкать некоторое время после остановки в среднем положении.

Вот место в моем демо-коде для установки позиции.

if ((x == 0) || (x % 35== 0)) { 
    setTimeout(function() { 
     i.top = x + 'px'; 
    }, 1000); 
} else { 
    i.top = x + 'px'; 
} 

Любой может мне помочь? Благодаря!

ОБНОВЛЕНИЕ: Причина, по которой я установил 35, состоит в том, что я обнаружил, что прокрученные элементы находятся примерно в среднем положении, когда оно равно 0, -35, -70, -105, .... Но когда я консоль все x, я обнаружил, что значение x находится между (31, -251). Вы знаете, как найти точную позицию, когда каждый элемент находится в середине позиции? Благодаря!

+3

что Шакин выглядит очень смешно –

+0

Да, смешно. Кажется, это из-за конфликта времени между setTimeout и setInterval (который находится в нижней части моего кода) –

+3

+1 для смешного встряхивания. – DontVoteMeDown

ответ

3

я изменил свой код немного,

я установить переменный «K», что интервал назначается и я очистить интервал от остановки и запустить его снова после тайм-аута

выглядит хорошо для меня ->http://jsfiddle.net/ato0mf7u/3/ не смешно Шакин больше ;-D

window.onload = addScrollers; 


var i = 1; 
var arr = ['one ', 'two', 'three', '4', '5', '6', '7']; 
var mid; 
var k; 
function addScrollers() { 

    var txt = arr[0]; 
    while (i < arr.length) { 
     txt += '<p>' + arr[i] + '</p>'; 
     i++; 
    } 
    startScroll('myscroller', txt); 

} 

var speed = 10; // scroll speed (bigger = faster) 
var dR = false; // reverse direction 

var step = 1; 
function objWidth(obj) { 

    if (obj.offsetWidth) return obj.offsetWidth; 
    if (obj.clip) return obj.clip.width; 
    return 0; 
} 
function objHeight(obj) { 

    if (obj.offsetHeight) return obj.offsetHeight; 
    if (obj.clip) return obj.clip.height; 
    return 0; 
} 
function scrF(i, sH, eH) { 
    var x = parseInt(i.top) + (dR ? step : -step); 
    if (dR && x > sH) { 
     x = -eH; 
    } else if (x < 1 - eH) { 
     x = sH; 
    } 
    //when x is the times of 35, the positio is in middle 
    if ((x == 0) || (x % 35== 0)) { 
     clearInterval(k); 
     setTimeout(function() { 
      i.top = x + 'px'; 
      k = setInterval(function() { 

      scrF(i, sH, eH); 
      }, 1000/speed); 
     }, 1000); 

    } 
    else { 
     i.top = x + 'px'; 
    } 
    return x; 
} 
function startScroll(sN, txt) { 


    var scr = document.getElementById(sN); 
    var sW = objWidth(scr); 
    var sH = objHeight(scr); 
    scr.innerHTML = '<div id="' + sN + 'in" style="position:absolute; left:3px; width:' + sW + ';">' + txt + '<\/div>'; 
    var sTxt = document.getElementById(sN + 'in'); 
    var eH = objHeight(sTxt); 

    mid = (eH - sH)/2; 

    sTxt.style.top = (dR ? -eH : sH) + 'px'; 
    sTxt.style.clip = 'rect(0,' + sW + 'px,' + eH + 'px,0)'; 


    k = setInterval(function() { 

     scrF(sTxt.style, sH, eH); 
    }, 1000/speed); 

} 
+0

Хорошо, что он работает, но почему сброс интервала внутри таймаута исправил его? я довольно смущен – Nunners

+0

нет, очистка интервала исправила его! Я только начал его снова, чтобы вы продолжали, фактически вам не нужен интервал вообще, просто вызовите scrF() снова после таймаута –

+0

Ну, вам понадобится интервал, другой разумный только перемещайте 1 позицию, не так ли? Все еще кажется странным, почему очистка интервала будет работать. По крайней мере, на моих глазах – Nunners

Смежные вопросы