用 js 寫區塊自適應,等比縮放

▼500是可以調整的數值,藍色數字調整不同比例視窗所呈現的區塊長寬

page3ContentResize();

    $(window).resize(function() {
        page3ContentResize();
    });

    function page3ContentResize(){//page3Contant區塊自適應

        var page3_width = $('.page3').width(),
            page3_height = $('.page3').height(),
            page3Content_set_newwidth = 0,
            page3Content_set_newheight = 0;

        if(page3_width<page3_height+500){
            // console.log('寬小於高')
            page3Content_set_newWidth = page3_width/1.3;
            page3Content_set_newHeight = page3_width/3.5;
        }else{
            // console.log('寬大於高')
            page3Content_set_newWidth = page3_height/0.7;
            page3Content_set_newHeight = page3_height/2;
        }

        $('.page3_content').css({'width':page3Content_set_newWidth+'px'});
        $('.page3_content').css({'height':page3Content_set_newHeight+'px'});

    }

留言

這個網誌中的熱門文章

PHP讀資料庫的資料,保留換行及空格

CSS animation 簡寫&好用的工具

使陣列裡的數值隨機重新排序