重新調整屏幕分辨率後，Jquery事件能否改變？

我正在創建一個加載後執行一系列j-query動畫事件的網站。當瀏覽器的屏幕分辨率發生變化時（從寬屏幕到普通屏幕或平板電腦等），是否可以更改加載時發生的jquery動畫的參數？例如，當屏幕分辨率降低時，讓jquery動畫向左移動1000px，而不是向左移動1320px？重新調整屏幕分辨率後，Jquery事件能否改變？

我對在加載動畫jQuery代碼如下：

$(document).ready(function(){ 
$(window).load(function(){ 
$("#div1").delay(500).fadeIn(1000);     
$("#div1").animate({bottom:"+=490px"});   
$("#div1").animate({left:"+=1320px"});   
$("#div1").fadeOut(1500);

我已經使用媒體查詢更改爲CSS樣式當屏幕分辨率更改，現在我只是需要能夠改變J-也查詢動畫。

來源

2013-07-22 Sam Friday Welch

這裏是一個關於檢測屏幕資源的帖子。使用jQuery更改：http://stackoverflow.com/questions/8575772/how-to-detect-in-jquery-if-screen-resolution-changes – tymeJV

您正在描述檢測對瀏覽器窗口分辨率的更改，而不是屏幕分辨率。使用.resize()或等效地.on('resize', ...)這樣做很容易。

var animationParameters = {}; // an empty object 

function setAnimationParametersForWindowWidth(width) { 
    if (width < 1024) { // change to the width you care about 
     animationParameters.fadeInTime = 500; 
     // set all variables that depend on the window width 
    } else { 
     animationParameters.fadeInTime = 1000; 
     // set all variables that depend on the window width 
    } 
} 
function setAnimationParameters() { 
    var width = $(window).width(); 
    setAnimationParametersForWindowWidth(width); 
} 

$(window).on('resize', setAnimationParameters); 

function doTheAnimation() { 
    $("#div1").delay(500).fadeIn(animationParameters.fadeInTime); 
    // run more animations, using the variables in animationParameters 
} 

$(document).ready(function(){ 
    setAnimationParameters(); 
    doTheAnimation(); 
});

正如我所展示的，你應該改變你的.animate()電話使用的變量而不是硬編碼數字的值。這將允許動畫根據瀏覽器窗口的大小而不同。添加儘可能多的變量，因爲動畫中有數字發生變化。

resize事件的處理程序查看$(window).width()以確定當前窗口寬度。

來源

2013-07-22 20:12:30

爲什麼要使用變量而不是硬編碼？ – Pieter

您好羅裏 - 感謝以上，但我如何讓jquery註冊不同的瀏覽器分辨率？ –

@SamFridayWelch我提供了一個更詳細的例子，並解釋了'$（window）.width（）'。希望這會爲你解決問題。 –

重新調整屏幕分辨率後，Jquery事件能否改變？

回答

相關問題