2

我有一个 jQuery 内容滑块，其中每张幻灯片都是屏幕的全宽。我正在计算每张幻灯片应该在 jQuery 中的宽度 - 而不是 CSS（我有这样做的理由 - 我不会打扰你用它们）。正如您从下面的代码中看到的那样，我计算了所有尺寸两次 - 第二次是当用户调整窗口大小时。我只是想知道我是否可以存储代码，然后在 $(window).resize(); 中调用它 ? 这应该有一个简单的答案，但目前它正在躲避我！

var windowHeight = $(window).height(); //Get the height of the window
var windowWidth = $(window).width(); //Get the width of the window
$(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window

$(".slide").each(function(i, e) {
    //Execute animation
    $("#trigger" + i).click(function(e) {
        $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); //The variables here that I use to animate the slide are unimportant to my question. I’ve removed the vars so this code is easier to read.
    });
});

//Resize
$(window).resize(function() {
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width();
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px");

    $(".slide").each(function(i, e) {
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo');
        });
    });

});
4

3 回答 3

1 
function adjustSize(){
    var windowHeight = $(window).height(); //Get the height of the window
    var windowWidth = $(window).width(); //Get the width of the window
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window

    $(".slide").each(function(i, e) {
        //Execute animation
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); //The variables here that I use to animate the slide are unimportant to my question. I’ve removed the vars so this code is easier to read.
        });
    });
}
$(window).resize(adjustSize);
adjustSize();  //or $(window).resize(adjustSize).resize(), it works too
于 2012-09-22T03:56:33.990 回答
0

我认为这是您真正需要的（并且应该可以）：

$(function() {
    var $window = $(window),
        windowHeight, 
        windowWidth;
    $(".slide").each(function(i, e) {
        $("#trigger" + i).on("click", function(e) {
            $(".slideContainer")
                .stop(true, false)
                .animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); 
        });
    });
    function adjustSize(){
        windowHeight = $window.height();
        windowWidth = $window.width();
        //Make each slide’s dimensions equal to that of the window
        $(".slide").css({ width: windowWidth, height: windowHeight });
    }

    $window.resize(adjustSize);
    adjustSize();
})
于 2012-09-22T11:58:51.957 回答
0

解决方案是创建一个函数并在初始化期间调用它一次，然后在窗口调整大小时调用它。

$(document).ready(function() {
    //don't need to attach the click handlers everytime... just do it once
    $(".slide").each(function(i, e) {
        //Execute animation
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); 
         });
     });

     adjustSize();
})

$(window).resize(adjustSize);

function adjustSize(){
    var windowHeight = $(window).height(); //Get the height of the window
    var windowWidth = $(window).width(); //Get the width of the window
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window
}
于 2012-09-22T04:20:11.433 回答