01.30.

제이쿼리 예제

랜덤숫자증가

랜덤으로 색깔과 크기가 달라지면서 계속 증가하는 숫자를 띄우는 예제

* parseInt(Math.random()*0xffffff)).toString(16) 랜덤칼라구문

제이쿼리의 좌표

offset그룹 : 부모요소와 자식요소의 위치관계 (일반적으로 알고 있는 좌표개념)

scroll그룹 : overflow 상태에서 보이지 않는 영역의 길이 (스크롤되는 범위를 계산)

    <script>   
        var nCount=0;
        var $panel=null;
        $(document).ready(function(){
            init();
            start();
        });
           
            function init(){
                $panel=$("#panel");   
            }
            function start(){
                setInterval(addTag,20);   
            }
            function addTag(){
                nCount++;
                var color="#"+(parseInt(Math.random()*0xffffff)).toString(16);
                var fontSize=(10+parseInt(Math.random()*40));
                $("<span></span>").html(nCount).css({color:color,fontSize:fontSize,display:"inline-block"}).appendTo($panel);
                window.scrollTo(0,document.body.scrollHeight);
            }
    </script>

이미지자동변경

이미지가 시간에 따라 자동으로 변경되는 예제

    <script>
        var nCount=0;
        var $img1;
       
        $(document).ready(function(){
            init();
            start();
        });
       
        function init(){
            $img1=$("#img1")    
        }
        function start(){
            setInterval(onChange,1000);    
        }
        function onChange(){
            nCount++;
            if(nCount>10){
                nCount=1    
            }
            $img1.attr("src","images/img"+nCount+".jpg")
        }
    </script>