непрерывный цикл с div и jquery
я продолжаюпредыдущий пост, но я думал, чтобуду открывать новый поток, поскольку он использует другой подход и содержит более актуальный код. Тем не менее, я'Я пытаюсь получить бесконечный цикл с прокруткой div через окно (другой пост имеет изображение, и код ниже работает).
Bleh...
body {
padding: 0;
text-align: center;
}
#container {
width: 1000px;
padding: 10px;
border: 1px solid #bfbfbf;
margin: 0 auto;
position: relative;
}
#window {
width: 400px;
height: 100px;
padding: 10px;
border: 3px solid #666;
margin: 0 auto;
}
.box {
height: 100px;
width: 100px;
border: 1px solid #666666;
position: absolute;
z-index: -1;
}
.red { background-color: #ff6868;}
.green { background-color: 7cd980;}
.blue { background-color: #5793ea;}
.yellow { background-color: #f9f69e;}
.purple { background-color: #ffbffc;}
.cyan { background-color: #bff3ff;}
$(window).load(function() {
arrangeBoxes();
setInterval('shiftLeft()', 3000);
});
// arrange the boxes to be aligned in a row
function arrangeBoxes() {
$('.box').each( function(i, item) {
var position = $('#window').position().left + 3 + i * ( $(item).width() + 10 );
$(item).css('left', position+'px')
});
}
// shifts all the boxes to the left, then checks if any left the window
function shiftLeft() {
$('.box').animate({'left' : "-=100px"}, 3000, 'linear');
checkEdge();
}
// returns the new location for the box that exited the window
function getNewPosition() {
return $('.box:last').position().left + $('.box:last').outerWidth() + 10;
}
// if the box is outside the window, move it to the end
function checkEdge() {
var windowsLeftEdge = $('#window').position().left;
$('.box').each( function(i, box) {
// right edge of the sliding box
var boxRightEdge = $(box).position().left + $(box).width();
// position of last box + width + 10px
var newPosition = getNewPosition();
if ( $(box).attr('class').indexOf('red') >=0 ) {
console.log('box edge: ' + boxRightEdge + ' window edge: ' + windowsLeftEdge + ' new pos: ' +newPosition);
}
if ( parseFloat(boxRightEdge) < parseFloat(windowsLeftEdge) ) {
$(box).css('left', newPosition);
$(box).remove().appendTo('#window');
first = $('.box:first').attr('class');
console.log('first is ' + first);
}
});
}
В любом случае, проблема в том, что я могу заставить коробки сдвигаться влево, но я могуя получаю ведущую коробку, чтобы вернуться к концу строки, когда я запускаю все это. Когда я запускаю каждую функцию отдельно (используя firebug) -
>> $('.box').animate({'left' : "-=100px"}, 3000, 'linear');
>> checkEdge()
Работает отлично. Когда я собираю их вместе, я просто получаю непрерывное движение справа налево, пока прямоугольники не покинут экран, поэтому, должно быть, они взаимодействуют друг с другом. Я надеюсь, что это имеет смысл (если нет, сохраните приведенный выше блок кода в виде файла HTML и запустите его в браузере). Я'Я застрял на этом некоторое время, поэтому любая помощь будет потрясающей. Благодарю.