Divs不知道屏幕大小調整

第一個div是一個類別，第二個div包含一些照片。Divs不知道屏幕大小調整

我想要做的事情，當用戶點擊一個圖像屏幕寬度向右的第一個div移動0.7和第二個div所有圖像消失在那，所以我寫了：

$(document).ready(function() { 
 
    $("img").click(function() { 
 
    var my_width = screen.width * 0.7; 
 
    $(".second_div").find("img").hide(); 
 
    $(".first_div").css({ 
 
     "transform": "translate(" + my_width + "px,0px)", 
 
     "-webkit-transform": "translate(" + my_width + "px,0px)", 
 
     "-ms-transform": "translate(" + my_width + ",0px)" 
 
    }); 
 
    }); 
 
});

.first_div { 
 
    transition-duration: 2s; 
 
}

<div class="first_div col-md-1"> 
 
    //some code 
 
</div> 
 
<div class="second_div col-md-11> 
 
      //some codes 
 
</div>

當其全屏它的作品的權利，但是當我調整窗口的大小，然後重試第一個div將不設在它應該（0.7屏幕寬度）什麼」你錯了嗎？

來源

2015-12-15 Ali Seyfi

以及自舉列會發生什麼？ –

我的意思是，當過渡發生第一個div移動到第二個，所有的照片將隱藏。現在該部門改變了？ –

如何在轉換後在第一個div的左側放置div？ –

的窗口的寬度，我會用以下內容：

var my_width = document.documentElement.clientWidth * 0.7;

這是相同的（跨瀏覽器兼容）使用jQuery的$.width()

有關獲取寬度的不同方法的詳細信息解決方案，請參閱這link。

來源

2015-12-15 01:39:57 thedarklord47

感謝名單，但在此[鏈接]沒有工作（http://qeshmbook.com/test.html）點擊下面的圖片，並嘗試調整窗口 –

中的鏈接，你還在用'VAR my_width = screen.width * 0.7;'。將其更改爲我的答案中顯示的內容可以以任何大小修復它。如果你說在動畫完成後調整大小並不看你想要如何，那完全是另一個問題。只使用目前爲止的動畫不會提供響應式體驗。 – thedarklord47

對不起，這是一個錯誤！非常感謝你的幫助 –

嘗試使用窗口的內部寬度，而不是在屏幕的寬度，因此，它的相對於視口的大小。更換

var my_width = screen.width * 0.7 ;

有：

var my_width = window.innerWidth * 0.7 ;

在這裏看到一個例子：

http://codepen.io/anon/pen/jWWEKO

來源

2015-12-15 01:37:57 Pabs123

謝謝！它很好。 –

但是，當我調整窗口的大小，它不會改變它的位置！也許我應該寫一個$（window）.resize（function（）{}）;太。不管怎樣，謝謝你！ –

Divs不知道屏幕大小調整

回答

相關問題