3
나는 계속해서 previous post을 사용하고 있지만 다른 접근 방식을 취하고 실제 코드가 더 많기 때문에 새로운 스레드를 열어 보았습니다. 어쨌든, 나는 창을 통해 div 스크롤하는 무한 루프를 얻으려고 노력하고있다. (다른 포스트는 이미지를 가지고 있으며, 아래의 코드는 작동한다.)divs와 jquery가 포함 된 연속 루프
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Bleh...</title>
<style type="text/css" media="screen">
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;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(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);
}
});
}
</script>
</head>
<body id="index">
<div id="container">
<div id="window">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box purple"></div>
<div class="box cyan"></div>
</div>
</div>
</body>
</html>
어쨌든, 문제는 내가 상자가 왼쪽으로 이동 얻을 수 있지만, 나는 전체를 실행할 때 주요 상자가 줄의 끝으로 다시 팝업을 얻을 수 있다는 것입니다. 각 기능을 별도로 실행하면 (화분을 사용하여) -
>> $('.box').animate({'left' : "-=100px"}, 3000, 'linear');
>> checkEdge()
위대한 작품입니다. 내가 함께 넣을 때, 상자가 화면을 떠날 때까지 오른쪽에서 왼쪽으로 연속 동작을하기 때문에 상호 작용하는 방식이어야합니다. 위의 코드 블록을 html 파일로 저장하고 브라우저에서 실행하면 좋을 것입니다. 나는 이것에 잠시 동안 고생했다. 그래서 어떤 도움도 굉장 할 것이다. 감사.
흠, 문법이 달라 지나요? iirc 전에 큰 성공을 거둔 버팀대없이 버전을 사용했습니다. 이 경우 실제로는 – Karsten
입니다. 설명은 내 대답에 나와 있습니다. 기술적으로 솔루션이 정확하고 솔루션이 올바르지 않습니다. 자세한 내용은 답변 확인을 참조하십시오. – jitter
@ 지터 : 설명 해 주셔서 감사합니다. – Karsten