Question

我已经反复尝试将此功能更改为jQuery，但我似乎无法让它正常运行。任何人都可以给我任何帮助吗？

window.onresize = resizeImage;

function resizeImage(){
    var newHeight = document.documentElement.clientHeight;
    var newWidth = document.documentElement.clientWidth;
    document.getElementById('crofthouse').width = (newHeight / 2) * 1.33;
    document.getElementById('crofthouse').height = (newHeight / 2);
    document.getElementById('main').style.width = (newHeight / 2) * 1.33;
    document.getElementById('main').style.height = (newHeight / 2);

    var margin = (newHeight - document.getElementById('crofthouse').height) / 2;
    document.getElementById('main').style.margin = margin + ',auto,' + margin + ',auto';
}

这是我转换它的尝试 window.onresize = resizeImage;

function resizeImage(){
var newHeight = document.documentElement.clientHeight;
var newWidth = document.documentElement.clientWidth;

$("#crofthouse").css("width, (newHeight /2) * 1.33")
$("#crofthouse").css("hegiht, (newHeight /2)")
$("#main").css("width, (newHeight /2) * 1.33")
$("#main").css("height, (newHeight /2)")


var margin = (newHeight - $('#crofthouse').css("height) / 2");
$('main').css("margin = margin + ',auto,' + margin + ',auto'");

}

Answer 1

应该这样做..

$(window).resize(function(){
    var doc = $(document),
        croft = $('#crofthouse'),
        main = $('#main'),
        height = doc.height(),
        margin = croft.height() / 2;


    croft.add(main).css({
             width:(height / 2) * 1.33, 
             height:(height / 2)
    });
    main.css({ margin: margin + 'px auto' });
});

Answer 2

window.onresize = resizeImage;

function resizeImage(){
    var newHeight = document.documentElement.clientHeight;
    var newWidth = document.documentElement.clientWidth;
    var croftHouse = document.getElementById('crofthouse');
    croftHouse.height = (newHeight / 2) * 1.33;
    croftHouse.width = (newWidth / 2);
    var main = document.getElementById('main');
    main.style.width = (newHeight / 2) * 1.33;
    main.style.height = (newHeight / 2);

    var margin = (newHeight - croftHouse.height) / 2;
    main.style.margin = margin + ',auto,' + margin + ',auto';
}

或者真的想要一个jquery方法;

$(window).resize(resizeImage);
    function resizeImage(){
        var newHeight = document.documentElement.clientHeight;
        var newWidth = document.documentElement.clientWidth;
        var croftHouse = document.getElementById('crofthouse');
        croftHouse.height = (newHeight / 2) * 1.33;
        croftHouse.width = (newWidth / 2);
        var main = document.getElementById('main');
        main.style.width = (newHeight / 2) * 1.33;
        main.style.height = (newHeight / 2);

        var margin = (newHeight - croftHouse.height) / 2;
        main.style.margin = margin + ',auto,' + margin + ',auto';
    }

并且对于记录我不确定croftHouse.height是做什么的......你的意思是croftHouse.style.height ??

Answer 3

它应该有效，试试吧。

$(window).resize(function(){
    var docEl = document.documentElement;
    var newHeight = docEl.clientHeight;
    var newWidth = docEl.clientWidth;
    $('#crofthouse').width((newHeight / 2) * 1.33);
    $('#crofthouse').height((newHeight / 2));
    $('#main').css({
        width: (newHeight / 2) * 1.33,
        height: newHeight / 2 
    );

    var margin = newHeight - (($('#crofthouse').height()) / 2);
    $('#main').css('margin', margin + ', auto, ' + margin + ', auto');
};

将此函数从Javascript转换为jQuery

3 个答案: