Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

3/2 사진 트랜지션 코드 본문

TIS_2016/HTML5_1기

3/2 사진 트랜지션 코드

moozi 2016. 3. 2. 16:30

<html>
    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <style type="text/css">
            .small{
                width:30%;
            }
           
            .large{
                width:100%;               
            }
           
            img{
                float:left;
                -webkit-transition-property: width;
                -webkit-transition-duration: 1s;
            }
           
            .clear_both{
                clear:both;
            }
           
           
           
        </style>
       
        <script type="text/javascript">
            $(document).ready(
                function(){
                    
                    $("#pic").data("flag","false");//flag에 false저장
                    $("#pic").click(
                        function(){
                            var bflag=$("#pic").data("flag");//flag값을 읽어옴
                            if(bflag=="false"){
                                //small을 large로 변경
                                $("#pic").removeClass("small");
                                $("#pic").addClass("large");
                                //flag값을 true로 변경
                                $("#pic").data("flag","true");
                            }else{
                                //large를 small로 변경
                                $("#pic").removeClass("large");
                                $("#pic").addClass("small");
                                //flag값을 false로 변경
                                $("#pic").data("flag","false");
                            }
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>사진 트랜지션</h1>
            </div>
            <div data-role="content">
                <img class="small" id="pic" src="pic1.jpg" alt="멋진사진" />
                <h2>사진 트랜지션 효과</h2>
                <div class="clear_both"></div> float:left 미적용
                <p>사진 트랜지션 효과는 css와 jquery를 이용해서 사진을 클릭했을 때 지정한 시간(second)만큰 transition효과가 나타나게 하는 기술입니다.</p>
            </div>
        </div>
       
       
   
    </body>
</html>

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

3/8 자바스크립트 홀수짝수 체크  (0) 2016.03.08
3/8 레이아웃 연습 파일  (0) 2016.03.08
3/7 안랩사이트 데모 소스  (1) 2016.03.07
수업자료백업 03/03  (0) 2016.03.03
2/29 구글맵 소스  (0) 2016.02.29
'TIS_2016/HTML5_1기' Related Articles more
Comments