0

在我们的网站上，我们有视频缩略图，单击缩略图会在模式对话框中打开视频。

视频本身是 16:9，但播放器底部有额外的细节，所以没有。

在对话框中，我们有两个按钮，增长和收缩。

按钮以 (originalsize (*|/) growBy) 为单位增大/缩小播放器。因此，对于原始步长的 50%，growBy 将是 1.5。

无论如何，这一切都很好，并显示在代码块 #1 中，

我遇到的问题是我需要设置一个限制，这样，如果要求对话框超出窗口的宽度或高度，它将简单地增长到它可以的（按比例）最大尺寸。

例如，如果我们被要求超出窗口的最大宽度，对话框宽度（包括填充）将等于窗口宽度，但高度不会（当然，除非对话框比例恰好与窗口匹配，但这不太可能！）

相反，如果我们被要求超出窗口的最大高度，对话框高度（包括填充）将等于窗口高度，但高度不会（再次除非对话框比例恰好与窗口匹配） .

这就是我被卡住的地方，我的尝试是在代码块 #2 中，现在我只是在检查高度是否太大，但我可以很好地完成高度，问题是，我没有知道如何计算调整高度步长时的宽度。有趣的代码在 Code Block pre#2 中。

如果我的想法是正确的，我需要计算出百分比videoStep.height tempStep.height是多少，然后设置tempStep.width为videoStep.width+ (videoStep.width*percentage)？

但我试着做：

var percentage = tempStep.height/videoStep.height;
tempStep.width = videoStep.width+(videoStep.width*percentage);

代替

tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

但是由于视频比例丢失，宽度似乎放大太多（播放器比例变为 586:281）

代码块 pre#2

var windowSize = {
    height: $(window).height(),
    width: $(window).width()
};

useTempStep = false;
var fullDialogSize = {
    height: newDialogSize.height+videoDialogSize.padding.height,
    width: newDialogSize.width+videoDialogSize.padding.width
};
if(fullDialogSize.height > windowSize.height){

    $growButton.addClass('disabled');

    tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
    tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

    useTempStep = true;

    newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
    newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width //This line is not being calculated right!
    };

}

代码块 #1

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width()
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var clickHandler = function () {
    var button = $(this);

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, videoStep, action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);

代码块 #2

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height(),
    width: $videoPlayer.width()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width(),
    padding: {
        height: $videoDialog.outerHeight() - $videoDialog.height(),
        width: $videoDialog.outerWidth() - $videoDialog.width()
    }
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var tempStep = {
    height: 0,
    width: 0
};

var useTempStep = false;

var clickHandler = function () {
    var button = $(this);

    if(button.hasClass('disabled')){
        return;
    }

    $growButton.removeClass('disabled');

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, (useTempStep ? tempStep : videoStep), action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    useTempStep = false;
    var fullDialogSize = {
        height: newDialogSize.height+videoDialogSize.padding.height,
        width: newDialogSize.width+videoDialogSize.padding.width
    };
    if(fullDialogSize.height > windowSize.height){

        $growButton.addClass('disabled');

        tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
        tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

        useTempStep = true;

        newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
        newDialogSize = {
            height: newPlayerSize.height + dialogDifference.height,
            width: newPlayerSize.width + dialogDifference.width
        };

    }


    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);
4

1 回答 1

1

如果高度需要缩小1，那么宽度需要与比率相匹配。（因为 16/9 指的是宽高比）

伪代码：

new_height = max_height;
new_width  = height * ratio;
// where ratio = 16/9

以下是我可能建议更改的内容：

    var ratio = currentPlayerSize.width / currentPlayerSize.height,
        new_height = newPlayerSize.height + dialogDifference.height;

    newDialogSize = {
        height: new_height,
        width:  new_height * ratio
    };

笔记：

1如果高度 > 宽度和高度 > max_height，则需要更改高度

或者你的问题可能只是在sizeCalc()：

    function sizeCalc(currentPlayerSize, step, action){
        var newPlayerSize,
            ratio = currentPlayerSize.width / currentPlayerSize.height;
            new_height;

        if (action == 'grow') {
            new_height = currentPlayerSize.height + step.height;
        } else {
            new_height = currentPlayerSize.height - step.height;
        }

        newPlayerSize =  {
            height: new_height,
            width:  new_height * ratio
        };

        return newPlayerSize;
    }
于 2013-02-20T02:08:11.250 回答