01.31.

좌표이동(직선)

    <script>
        var nEndX;
        var nCurrentX;
        var nStartX;
        var nTimer;
        var nStep;
        var $bar;
        var $shoes;
       
        $(document).ready(function(){
            init();
            initEvent();
        });
        function init(){
            $bar=$("#bar");
            $shoes=$("#img1");
            nStartX=$bar.position().left;
            nEndX=$bar.outerWidth()+nStartX-$shoes.outerWidth();
            nCurrentX=nStartX;
            nStep=2;
            nTimer=0;
        }
        function initEvent(){
            $("#btn_start").bind("click",function(){
                start();
            });
            $("#btn_stop").bind("click",function(){
                stopMove();
            });
        }
        function start(){
            if(nTimer==0){
                nTimer=setInterval(startMove,30)
            }
        }
        function startMove(){
            nCurrentX+=nStep;
            if(nCurrentX>nEndX){
                nCurrentX=nEndX;
                nStep=-2   
            }
            if(nCurrentX<nStartX){
                nCurrentX=nStartX;
                nStep=2   
            }
            $shoes.css("left", nCurrentX);
        }
        function stopMove(){
            if(nTimer!=0){
                clearInterval(nTimer);
                nTimer=0
            }
        }
    </script>

좌표이동(대각선)

    <script>
        var startX
        var startY
        var nStepSize=4;
        var nStepX=nStepSize;
        var nStepY=nStepSize;
        var $img1;
        var nTimer;
        var nCurrentX;
        var nCurrentY;
        var nEndX;
        var nEndY;
       
        $(document).ready(function(e) {
            init();
            initEvent();
        });
        function init(){
            nTimer=0;
            $img1=$("#img1");   
            nCurrentX=$img1.position().left;
            nCurrentY=$img1.position().top;
            $panel=$("#panel");
            nEndX=$panel.innerWidth()-$img1.outerWidth();
            nEndY=$panel.innerHeight()-$img1.outerHeight();               
        }
        function initEvent(){
            $("#btn_start").bind("click", function(){
                start();   
            })
            $("#btn_stop").bind("click", function(){
                stopMove();   
            })
        }
        function start(){
            if(nTimer==0){
                nTimer=setInterval(startMove,20);
            }
        }
        function startMove(){
            nCurrentX+=nStepX;
            nCurrentY+=nStepY;
           
            if(nCurrentX>nEndX){
                nStepX=-nStepSize;
            }
            if(nCurrentX<0){
                nStepX=nStepSize;
            }
            if(nCurrentY>nEndY){
                nStepY=-nStepSize;
            }
            if(nCurrentY<0){
                nStepY=nStepSize;
            }
            $img1.css({left:nCurrentX, top:nCurrentY});
        }
        function stopMove(){
            if(nTimer!=0){
                clearInterval(nTimer);
                nTimer=0
            }
        }
    </script>

이미지스크롤

    <script>
        var $imgWrap;
        var nEndY;
        var nCurrentY;
        var nTimer;
        var nStep;
        var $imgNum;
       
        $(document).ready(function(e) {
            init();
            initEvent();
        });
        function init(){
            $imgWrap=$("#image_view");
            $imgNum=$("#image_view img").size();
            nEndY=$imgWrap.innerHeight()*$imgNum-$imgWrap.innerHeight();
            nStep=2;
            nTimer=0;
            nCurrentY=0;
        }
        function initEvent(){
            $("#btn_start").bind("click", function(){
                start();   
            })
            $("#btn_stop").bind("click", function(){
                stopMove();   
            })
        }
        function start(){
       
            if(nTimer==0){
                nTimer=setInterval(startMove,20);
            }
        }
        function startMove(){
               
            nCurrentY+=nStep;
            if(nCurrentY>nEndY){
                nStep=-2;
            }else if(nCurrentY<0){
                nCurrentY=2;
            }
            $imgWrap.scrollTop(nCurrentY);
        }
        function stopMove(){
            if(nTimer!=0){
                clearInterval(nTimer);
                nTimer=0;
            }   
        }
    </script>