Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

3/16 animation 예제 코드 본문

TIS_2016/HTML5_1기

3/16 animation 예제 코드

moozi 2016. 3. 16. 18:22

<!doctype html>

<html>

    <head>

       

    

    </head>

    <body>

        <div id="div1">

            <img src="1.png" name="mypic">

        </div>

        

        <script type="text/javascript">

        var count=0;// 전역변수

        var pixel=0;// 전역변수. 픽셀값증가

            

        function startShow(){ 

            

            // count가 10보다 크면 다시 0부터 시작

            if(count>9){

                count=0; 

            }

            

            // pixel값이 가로 해상도 크기보다 커지면 0부터 시작

            if(pixel>screen.availWidth){

                pixel=0;

            }

            

            // pixel값이 가로 윈도우 크기보다 커지면 0부터 시작

//            if(pixel>window.innerWidth){

//                pixel=0;

//            }

            

            count+=1; // 카운트값 하나 증가.

            document.mypic.src = count + ".png"; 

            

           

            pixel+=10;            

  document.getElementById("div1").style.position="absolute";

            document.getElementById("div1").style.left=pixel+"px";

            

                  

            setTimeout('startShow()', 100);//1초마다 실행함.

            

            

        } 

            

        startShow();//함수호출. 애니메이션 시작   

            

            

            

        </script>

        

        

        

        

        

        

        

        

        

    </body>

</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

3/17 jquery append prepend 예제  (0) 2016.03.17
3/17 attr 메서드를 활용하는 예제  (0) 2016.03.17
animation 샘플이미지  (0) 2016.03.16
form validation 예제  (0) 2016.03.16
영화 동주 이미지  (0) 2016.03.15
'TIS_2016/HTML5_1기' Related Articles more
Comments