티스토리 뷰

function fImgResize(){

    var clientWidth = jQuery(window).width() - 12; // 현재 화면의 Width

    jQuery("img").each(function(index, obj) {

        var orgImgObj   = new Image();

        orgImgObj.src   = obj.src;

        var imgWidth    = obj.width;                 // 이미지의 Width (this.width 와 동일)

        var imgHeight   = obj.height;                // 이미지의 Height

        var rate = 1;                                // 비율(키우고 줄이는)

        // 이미지 width가 화면의 width보다 큰 경우 줄임

        if( imgWidth > clientWidth ){

            rate = clientWidth / imgWidth;

            obj.height = imgHeight * rate;

            obj.width  = imgWidth  * rate;

        // 현재 이미지 width가 현재창보다는 작고, 원본사이즈보다 작을 때 키워줌

        }else if( imgWidth < clientWidth && imgWidth < orgImgObj.width  ){

            rate = orgImgObj.width / imgWidth;

            obj.height = imgHeight * rate;

            obj.width  = imgWidth  * rate;

        }

    });

}




//element를 하나씩 가져와서 태그 안에 있는 내용을 보여준다.

$(document).ready(function () {

    $("#divContent").children("div").each(function () { 

// id가 divContent인 것에 접근해서 그 아래에 div에 가서 각각 하나씩 alert 창 띄워서 보여주기.

    alert($(this).html());

    });

});


//브라우저 창 크기에 따라 이미지 사이즈를 자동으로 조절해준다.

$(document).ready(function () {


            var currentWidth = $(window).width() - 12;

            

            $("#divContent").children("div").children("IMG").each(function () {

                var imgWidth = $(this).attr("width"); //각 이미지의 width 값

                var imgHeight = $(this).attr("height"); //각 이미지의 height 값

                var ratio = 1; //비율

            

                if (imgWidth > currentWidth) { //현재 창 크기보다 이미지의 width가 크다면 이미지 크기 조절

                    ratio = currentWidth / imgWidth;

                    newWidth = imgWidth * ratio;

                    newHeight = imgHeight * ratio;


                    $(this).attr({'width':newWidth, 'height':newHeight});

                }


            });

        });


//IMG태그 안에 있는 width값을 300으로 수정해서 출력한다, 이미지가 줄어든다.

$(document).ready(function () {

      $("#divContent").children("div").children("IMG").each(function () {

        //alert($(this).width()); //640 출력

        $(this).css( { 'width':'300' } );

      });

 });


//윈도우(현재 창) 사이즈 구하기

var winH = $(window).height();

var winW = $(window).width();


// 테스트..

$(document).ready(function () {

    $("#divContent").children("div").each(function () {

    $(this).css( { 'width':'300' } );

    alert($(this).val());

    alert($(this).attr("css..."));  // attr은 style의 속성을 컨트롤하는 함수라고 함. 

});

               

// 테스트..

$(document).ready(function () {

$("#divContent").children("IMG").each(function () {

var result = $(this).attr("width")

alert(result);

});

});


'코딩 > jQuery' 카테고리의 다른 글

jQuery ContextMenu Plugin  (0) 2013.01.31
jQuery Quick API Reference  (0) 2013.01.28
jQuery 속도 높이는 방법  (0) 2013.01.28
브라우저 사이즈를 통한 반응형 웹 구현  (0) 2013.01.17
email 입력 도우미 autocomplete  (0) 2013.01.06
jQuery Mobile 1.1.0  (0) 2012.07.05
댓글
댓글쓰기 폼