DIV nie ma informacji o zmianie rozmiaru ekranu

Pierwszy element div jest kategorią, a drugi element div zawiera kilka zdjęć.DIV nie ma informacji o zmianie rozmiaru ekranu

Chciałem zrobić coś, gdy użytkownik kliknie na obrazek pierwszy div posunięcie 0,7 szerokości ekranu do prawej i wszystkie obrazy w drugim div zniknąć, więc napisałem:

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

kiedy jego pełny ekran to działa dobrze, ale gdy rozmiar okna i spróbuj jeszcze raz pierwszy div nie będą znajdować się w miejscu gdzie jest podobno (0,7 szerokości ekranu) co źle?

Źródło

2015-12-15 Ali Seyfi

oraz co dzieje się z kolumnami bootstrap? –

Mam na myśli to, że gdy dojdzie do przejścia, pierwszy div przechodzi do drugiego, a wszystkie zdjęcia zostaną ukryte. teraz podział się zmienił? –

Co należy zrobić, aby umieścić div po lewej stronie pierwszego elementu div po przejściu? –

do szerokości okna chciałbym użyć następujących:

var my_width = document.documentElement.clientWidth * 0.7;

ta jest taka sama (kompatybilne z różnymi przeglądarkami) rozwiązanie stosowane przez jQuery $.width()

Aby uzyskać więcej informacji na temat różnych metod coraz szerokość, patrz to link.

Źródło

2015-12-15 01:39:57 thedarklord47

Thanx, ale nie działało w tym [link] (http://qeshmbook.com/test.html) kliknij na zdjęcie poniżej i spróbuj zmienić rozmiar okna –

w łączu, nadal używasz 'var my_width = screen.width * 0,7; '. Zmiana go na to, co jest pokazane w mojej odpowiedzi, naprawia je w dowolnym rozmiarze. Jeśli mówisz, że zmiana rozmiaru po zakończeniu animacji nie wygląda jak chcesz, jest to zupełnie inny problem. Używanie tylko animacji, której do tej pory nie zapewnisz, zapewni wrażliwą reakcję. – thedarklord47

Przepraszam, że to był błąd! dziękuję bardzo za pomoc –

Spróbuj użyć wewnętrznej szerokości okna zamiast szerokości ekranu, aby była ona zgodna z rozmiarem rzutni. zastąpić

var my_width = screen.width * 0.7 ;

var my_width = window.innerWidth * 0.7 ;

Zobacz przykład tutaj:

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

Źródło

2015-12-15 01:37:57 Pabs123

Dziękujemy! Jest w porządku. –

Ale gdy zmieniam rozmiar okna, nie zmieni to jego położenia! może powinienem napisać $ (window) .resize (function() {}); także. mimo wszystko dziekuję! –

DIV nie ma informacji o zmianie rozmiaru ekranu

Odpowiedz

Powiązane problemy