Question

我有一个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');
        });
    });

});

Answer 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

Answer 2

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

$(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
}

Answer 3

我认为这是你真正需要的（它应该有效）：

$(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();
})

存储jQuery代码供以后使用$（window）.resize（）

3 个答案: