티스토리 뷰

Programming language/jQuery

jQuery 18장~

hello-world 2012. 12. 12. 10:47
728x90
반응형

자바스크립트를 사용해서 시각적 효과 구현시 다음 세가지 사항을 css로 미리 지정한다.



1. 캔버스의 width스타일속성과 height 스타일 속성은 반드시 지정한다.

2. 캔버스의 position스타일 속성은 Relative로 지정한다.

3. 캔버스의 overflow 스타일 속성은 hidden으로 지정한다.

4. 구성요소의 position스타일 속성은 Absolute로 지정한다.



코드 18-2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            *{
             margin:0px; padding:0px;
            }
            #canvas{
                background:Gray;
            }
            .inner_box{
                background:Orange;
                width:100px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <h1>Test Header</h1>
        <div id="canvas">
            <div class="inner_box"></div>
            <div class="inner_box"></div>
            <div class="inner_box"></div>
            <div class="inner_box"></div>
            <div class="inner_box"></div>
        </div>
        <h1>Test Header</h1>
    </body>
</html>




코드 18-3

위의 18-2 코드에서 css부분 한줄 추가되었다.

.inner_box style에서  position:absolute 가 추가~

-책의 내용: animate()메서드를 사용해 left속성이나 top속성을 지정하려면 position스타일 속성이 

               Absolute나 Relative여야 한다. 절대 좌표를 사용해 애니메이션을 구현하는 것이 일반적이다.


.inner_box{
                background:Orange;
                width:100px;
                height:100px;
                position:absolute;
}




코드 18-4


#canvas {
                background: Gray;
                width:600px;
                height:400px;
            }
            




코드 18-5

아래 예제는 작은 사각형이 사선으로 그려지는 예제이다.

코드 설명-

a. jQuery의 each메서드는 selector(선택자)를 순환하면서 검색한다. 

다시 한번 집고 넘어가자. 

      1. $.each(object, function(index, item){} )   - 제이쿼리.each( 배열 혹은 오브젝트, 함수( index, item ){} )

      2. $(selector).each(function(index, item){} )  - 선택자.each( 함수(index, item){} );

선택자가 아닌 제이쿼리.each와는 호출방식이 틀리니 그 점 참고하자~ 

( 참고로 jQuery 내부에 each메서드 구현된 방식은 1번과 2번 같긴 하다. )

결과적으로 .(점)으로 시작한 selector(선택자)이름은 태그의 class네임을 의미하므로 class=inner_box라고 

지정된 태그를 전부 찾아낸다. 


b. 다음으로 function에 매개변수로 지정된 index 라는 것은 순환되어서 카운트되는 숫자로 생각하면된다.

그 숫자는 0부터 시작하여 inner_box라는 class네임을 가진 태그의 총개수 만큼 증가하게된다.

결과적으로 여기서 inner_box 총 5개이기에 index값은 0부터 4까지 증가하게 된다.


c. $(this) 는 each메소드 내부에 선언되었다. 

each메소드 선택자는 inner_box라는 클래스 네임을 가진 태그 모두이기에

$(this)===> inner_box라는 클래스 네임을 가진 태그

라는 것을 알 수 있다. 


d. left, top속성값에 해당 순차 증가값인 index에 90씩 곱한 위치에 놓이게 된다. 

   물론 .inner_box css내용엔 position이 absolute 지정되어 있어야 x,y위치 0,0으로 시작해

   의도한 값을 도출할 수 있다.



        <script>
            $(document).ready(function() {
                $(".inner_box").each(function(index) {
                    $(this).css({
                        left: index * 90,
                        top: index * 90
                    });
                });
            });
        </script>




코드 18-6


위의 18-5 예제의 연장선상에 있는 예제라 볼 수 있다.

position과 overflow속성이 추가되었다.

inner_box라는 class네임을 가진 태그 즉, 부모격으로써 감싸고 있는 레이어(div)는 아래처럼 canvas라는 id값을 가지고 있다.

id값 지정된 태그를 css에서 지칭할때는 #으로 시작해 표기한다. 


inner_box클래스네임을 가진 태그의 부모격, 즉 감싸고 있는 태그이기에 position은 relative 로 지정한다.

overflow속성은 hidden으로 처리하여 canvas태그 크기에 벗어나 있으면 보이지 않게 한다.



#canvas {
                background: Gray;
                width:600px;
                height:400px;
                position:relative;
                overflow:hidden;
            }




코드 18-14


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            /*전체 속성들을 감싸고 있는 태그에 지정한다. 즉 정해진 사이즈 600-400을 넘어가는 것(overflow)은                                                                                               hidden 처리하여 안보이게 한다. */
            .animation_canvas {
                overflow:hidden;
                position: relative;
                width: 600px;
                height: 400px;
            }
            
            /*Slider Panel 이미지 태그를 감싸는 부모격이라 할 수 있다. 3000px은 이미지의 총 크기라 할 수 있다. 움직이는 개체의 부모태그이기에 position은 relative로 지정한다.*/
            .slider_panel {
                width: 3000px;
                position: relative;
            }
            /*슬라이드로 움직일 이미지에 대한 부분이다. 우선 이미지를 로드하게 되면 세로로 쭈욱 정력하게 된다. 그것을 float으로 설정하여 좌측부터 수순대로 margin값없이 정렬하게 한다.  ( float속성은 현재위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. ) 그리고 크기를  .animation_canvas에서 지정한것에 벗어나지 않게 보기 좋게 하기위해 width 600 height 400으로 지정한다. */
            .slider_image {
                float: left;
                width: 600px;
                height: 400px;
            }
            /*슬라이드 텍스트-포지션은 부모격인 slider_text_panel에서 위치를 한곳으로 고정해주고 있기때문에 width, height값만 지정한다.*/
            /*Slider text panel*/
            .slider_text_panel {
                position: absolute;
                top: 200px;
                left: 50px;
            }
            .slider_text {
                position: absolute;
                width: 250px;
                height: 150px;
                color:#ffffff;
            }
            
            /*Control panel*/
            .control_panel {
                position: absolute;
                top: 380px;
                left: 270px;
                height: 13px;
                overflow: hidden;
            }
            /*버튼 요소들이 이미지로 되어 있을때 보통 div태그로 만들고 스타일 시트에서 background속성으로 이미지를 설정한다.그렇게 했을시 hover필터를 사용할 수 있다.*/
            .control_button {
                width: 12px;
                height: 46px;
                position: relative;
                float: left;
                cursor: pointer;
                background: url('images/point_button.png');
            }
            
            .control_button:hover {
                top: -16px;
            }
            
            .control_button.active {
                top: -31px;
            }
        </style>
        <script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".slider_text").css('left', -300).each( function(index){
                    $(this).attr('data-index', index);
                });
                $(".control_button").each( function(index){
                    $(this).attr("data-index", index);
                }).click( function(){
                    var index=$(this).attr("data-index");
                   moveSlider( index );
                }); 
                var beginNum=Math.round(Math.random()*5); 
                moveSlider(beginNum);
            });
            
            function moveSlider( id ){
                var moveX=-(id*600);
                
                $(".slider_panel").animate({left:moveX}, "500", "easeOutQuint");
                
                $(".control_button[data-index="+id+"]").addClass("active");
                $(".control_button[data-index!="+id+"]").removeClass("active");
                
                $(".slider_text[data-index="+id+"]").show().animate( {left:0}, "500" );
                $(".slider_text[data-index!="+id+"]").hide("slow", function(){
                    $(this).css("left", -300);
                });
                
            }
            
        </script>
        
    </head>
    <body>
        <h1>Test Header</h1>
        <div class="animation_canvas">
            <div class="slider_panel">
                <img class="slider_image" src="images/Desert.jpg"/>
                <img class="slider_image" src="images/Jellyfish.jpg"/>
                <img class="slider_image" src="images/Hydrangeas.jpg"/>
                <img class="slider_image" src="images/Koala.jpg"/>
                <img class="slider_image" src="images/Lighthouse.jpg"/>
            </div>
            <div class="slider_text_panel">
                <div class="slider_text">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="slider_text">
                    <h1>Nulla eget</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="slider_text">
                    <h1>Quisque eleifend</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="slider_text">
                    <h1>Done</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="slider_text">
                    <h1>Vivamus scelerisque</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="control_panel">
                <div class="control_button"></div>
                <div class="control_button"></div>
                <div class="control_button"></div>
                <div class="control_button"></div>
                <div class="control_button"></div>
            </div>
        </div>
        <h1> Test Header</h1>
    </body>
</html>








내식대로 약간 변형해본것~

18-14의 custom example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .animation_canvas {
                overflow: hidden;
                position: relative;
                width: 600px;
                height: 400px;
            }
            
            /*Slider Panel*/
            .slider_panel {
                width: 3000px;
                position: relative;
            }
            
            .slider_image {
                float: left;
                width: 600px;
                height: 400px;
            }
            
            /*Slider text panel*/
            .slider_text_panel {
                position: absolute;
                top: 200px;
                left: 50px;
            }
            
            .slider_text {
                position: absolute;
                width: 250px;
                height: 150px;
                color: #ffffff;
            }
            
            /*Control panel*/
            .control_panel {
                position: absolute;
                top: 380px;
                left: 270px;
                height: 13px;
                overflow: hidden;
            }
            
            .control_button {
                width: 12px;
                height: 46px;
                position: relative;
                float: left;
                cursor: pointer;
                background: url('images/point_button.png');
            }
            
            .control_button:hover {
                top: -16px;
            }
            
            .control_button.active {
                top: -31px;
            }
        </style>
        <script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            var bannerInfo = [{url: "images/Desert.jpg", title: "Lorem ipsum",details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
                { url: "images/Jellyfish.jpg", title: "Nulla eget", details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
                {url: "images/Hydrangeas.jpg",title: "Quisque eleifend",details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
                {url: "images/Koala.jpg",title: "Done",details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
                {url: "images/Lighthouse.jpg",title: "Vivamus scelerisque",details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }];
            
            window.onload = function() {
                init();
            }
            
            function init() {
                createPanel();
                $(".slider_text").css('left', -300).each(function(index) {
                    $(this).attr('data-index', index);
                });
                
                $(".control_button").each(function(index) {
                    $(this).attr("data-index", index);
                }).click(function() {
                    var index = $(this).attr("data-index");
                    moveSlider(index);
                });
                moveSlider(0);
            }
            
            function createPanel() {
                var imgData = "",
                 textData = "",
                 btnData = "";
                $.each(bannerInfo, function(id, item) {
                    imgData += '<img class="slider_image" src="' + item.url + '" alt="' + item.title + '" />'
                    textData += '<div class="slider_text">';
                    textData += ' <h1>' + item.title + '</h1> ';
                    textData += ' <p>' + item.details + '</p> ';
                    textData += '</div>';
                    btnData += '<div class="control_button"></div>';
                });
                
                $(".slider_panel").append(imgData);
                $(".slider_text_panel").append(textData);
                $(".control_panel").append(btnData);
            }
            
            function moveSlider(id) {
               var moveX=-( $(".slider_image").eq(id).outerWidth()*id );
                $(".slider_panel").stop(true, true).animate({ left: moveX}, "500", "easeOutSine", function() {
                    $(".slider_text[data-index=" + id + "]").stop().animate({left: 0, opacity: 1}, "500"); });
                $(".slider_text[data-index!=" + id + "]").stop().delay(100).animate({left: -300, opacity: 0}, "500", "easeInBack");
                $(".control_button[data-index=" + id + "]").addClass("active");
                $(".control_button[data-index!=" + id + "]").removeClass("active");
            }
        </script>
    </head>
    <body>
        <h1>Test Header</h1>
        <div class="animation_canvas">
            <div class="slider_panel"></div>
            <div class="slider_text_panel"></div>
            <div class="control_panel"></div>
        </div>
        <h1> Test Header</h1>
    </body>
</html>


728x90
반응형
저작자표시 비영리 변경금지

'Programming language > jQuery' 카테고리의 다른 글

웹 UI 참고~  (0) 2013.01.24
반응형 웹 28선  (0) 2012.12.26
위치 및 크기 프로퍼티, 메서드  (2) 2012.09.26
jQuery 튜토 및 소스 참조 사이트  (0) 2012.09.03
제이쿼리 이용한 슬라이드~  (0) 2012.09.03
댓글