將div保留在瀏覽器窗口最右側的問題，同時瀏覽器尺寸在動畫效果之後發生變化

Question

我有一個父div，其中包含兩個其他並排div。點擊這些div從瀏覽器窗口的一側移動到另一側（點擊左邊的div，它向左移動，點擊右邊的div，它移動到瀏覽器的最右側） - 我必須說到此爲止正如我所願。

當我嘗試通過抓取右下角並將其縮放到新維度來手動重新調整瀏覽器的大小時，就會出現問題。當我這樣做時，div保持在完全相同的位置（原始瀏覽器維度的最右邊），因此「掉落」在視野之外，這對我來說至關重要，因爲這個div保持在最右側，因爲瀏覽器窗戶正在改變尺寸。

我知道，如果說div的css屬性設置爲正確：0它應該保持在最右端，但由於某種原因，javascript動畫效果似乎沒有說明或覆蓋此並將其保留在原始瀏覽器中而不是遵循新的維度。

這是我目前的基本形式的代碼向你展示我怎麼有這麼遠：

HTML：

<span id='one'>&nbsp;  
    <span id='two'>&nbsp;</span> 
    <span id='three'>&nbsp;</span> 
</span> 

CSS：

#one { 
    height:100px; 
    width:210px; 
    background-color:red; 
    position:absolute; 
    left:0; 
} 
#two { 
    height:100px; 
    width:100px; 
    background-color:blue; 
    float:left; 
} 
#three { 
    height:100px; 
    width:100px; 
    background-color:green; 
    float:right; 
} 

的JavaScript：

$(document).ready(function(){ 
    $('#two').click(function(){ 
     window_width = $(document).width(); 
     element_width = $('#one').width(); 
     edge = window_width - element_width; 
     $('#one').animate({right:edge, left:0}, 100).delay(0); 
     console.log($('#one').css('left')); 
    }); 
}); 
$(document).ready(function(){ 
    $('#three').click(function(){ 
     window_width = $(document).width(); 
     element_width = $('#one').width(); 
     edge = window_width - element_width; 
     $('#one').animate({left:edge, right:0}, 100).delay(0); 
     console.log($('#one').css('left')); 
    }); 
    console.log($('#one').css('left')); 
}); 

任何幫助將是gre非常感謝 - 我已經搜索了好幾天，並努力尋找任何解決的答案 - 感謝所有提前。

Answer 1

嘗試在css文件中設置您的大小以％爲單位，以便在您從顯示器白色低分辨率打開html時調整大小。您還可以檢查媒體查詢。它們非常適合創建網頁，在各種分辨率上看起來都完全一樣。

Answer 2

您可以設置一個變量來保存div的位置，然後使用JQuery中的.resize()事件處理程序？例如，

var isLeft = true; 

$(window).resize(function() { 
    if (!isLeft) { 
     window_width = $(document).width(); 
     element_width = $('#one').width(); 
     edge = window_width - element_width; 
     $('#one').animate({right:edge, left:0}, 100).delay(0); 
     console.log($('#one').css('left')); 
    } 
}); 

和其他div一樣。您在點擊事件中設置了isLeft或isRight變量。只要你想的div來當屏幕變得越來越小，而不是隻是當它變得更大調整

Answer 3

DEMO

var _pos; 

$('#two').click(function() { 
    window_width = $(window).width(); 
    element_width = $('#one').width(); 
    edge = window_width - element_width; 
    $('#one').animate({ 
     right: edge, 
     left: 0 
    }, 100).delay(0); 
    console.log($('#one').css('left')); 
    _pos="left"; 
}); 

$('#three').click(function() { 
    window_width = $(window).width(); 
    element_width = $('#one').width(); 
    edge = window_width - element_width; 
    $('#one').animate({ 
     left: (edge > window_width)?window_width:edge, 
     right: 0 
    }, 100).delay(0); 
    console.log($('#one').css('left')); 
    _pos="right" 
}); 

$(window).resize(function(){ 
    if (_pos=="left") $("#two").click(); 
    if (_pos=="right") $('#three').click(); 
}); 

---

這裏的重要組成部分，正在改變$(document).width()到$(window).width()。

Answer 4

你可以監聽器連接到window.onresize：

https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize