animation] 여러장을 넓게(?) 펼져서 적용해봤습니다.

1)
marquee 의 단점(?)중에,
화면크기 이상의 스크롤의 경우
중간에 오류가 나도 나몰라라(?)해야한다는 것을 유념해야 한다는 것이 있고,

image 를 이용해서 여러장을 넘길 경우
한쪽 방향만으로는 세로크기나 가로크기의 최대값(보통 32767px)을 넘을 수 없다는 룰이 있어서

2)
평면을 최대한 활용한 방법을
setTimeout event 와 조합해보기로 했습니다.

...

3)

<DIV style="WIDTH: 100px; HEIGHT: 100px; OVERFLOW: hidden" id=D120402_3>
    <TABLE border=0 cellSpacing=0 cellPadding=0 width=200 height=200>
        <TBODY>
            <TR height=100>
                <TD bgColor=gray vAlign=top width=100 align=left>1</TD>
                <TD bgColor=yellow vAlign=top width=100 align=left>2</TD>
            </TR>
            <TR height=100>
                <TD bgColor=lightgreen vAlign=top width=100 align=left>3</TD>
                <TD bgColor=orange vAlign=top width=100 align=left>4</TD>
            </TR>
        </TBODY>
    </TABLE>
</DIV>
<SCRIPT>
    function xxmoveinit120402_4() {
        var i = 0,
            x, y;  
        function xxmove() {
            i++;
            i &= 3;
            x = i & 1;
            y = (i & 2) / 2;

            document.getElementById('D120402_3').scrollLeft = x * 100;
            document.getElementById('D120402_3').scrollTop = y * 100;
            setTimeout(xxmove, 500);
        }
        xxmove();
    }
    xxmoveinit120402_4();
</SCRIPT>

...

1	2
3	4

...

4)
제 계산(?)대로 움직여준다는 부분에서 다행히(?) 만족을 했습니다.
나중에(?)는, 이런 방법을 적용해서 많은 장수를 animation 화 시키기도 했구요.

*참고* http://club.cyworld.com/5083224319/185892185 

5)
극복해야할 점이라면.. 글쎄요..
지금의 경우는 paging 형태로, delay 가 고정되어 있습니다만...

음.. 필요에 따라서 gif 처럼
속도차이를 둘 수 있게 해야할지..라는 애매한 부분만 생각나네요.

easyBow killofki@.