2

各スライドが画面の全幅であるjQueryコンテンツスライダーがあります。私は各スライドがCSSではなくjQueryにあるべき幅を計算しています（そうする理由があります-私はあなたをそれらに飽きさせません）。以下のコードからわかるように、私はすべてのディメンションを2回計算しています。2回目は、ユーザーがウィンドウのサイズを変更したときです。コードを保存して、$（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

解決策は、関数を作成し、初期化中に1回呼び出してから、ウィンドウのサイズが変更されたときに呼び出すことです。

$(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 に答える
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 に答える