Moim celem jest translate ramka wzdłuż osi X przez 100px za każdym razem, gdy kliknięto przycisk. W jakiś sposób udało mi się to za pomocą zmiennej temp w jQuery. Czy istnieje inny sposób, który można osiągnąć wyłącznie poprzez CSS, tak że po kliknięciu przycisku pole powinno być translate100px z bieżącej pozycji?Tłumaczenie elementu za każdym razem w stosunku do jego aktualnej pozycji?

var temp = 100; 
 
$(document).ready(function(){ 
 
\t $('#b1').click(function(){ 
 
\t \t $('#box-one').css("transform","translate("+temp+"px, 0px)"); 
 
\t \t temp = temp + 100; 
 
\t }); 
 
});

#box-one 
 
{ 
 
\t background-color: blue; 
 
\t height: 100px; 
 
\t width: 100px; 
 
\t transition: all 0.3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div id="box-one"></div> 
 
    <button id="b1">Move</button> 
 
</body> 
 
</html>

Źródło

2015-04-10 Anonymous

widzę, że to możliwe tylko z CSS – Gael

To jest dosyć czysta metoda css - https: // jsfiddle .net/xqzfL9e1 / – Tasos

Oto czysta metoda CSS, chociaż jest trochę szalona.

Dodaj więcej wejść (i powiązanych CSS) w zależności od potrzeb:

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#box-one { 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition: all 0.3s ease; 
 
} 
 

 
input[type=checkbox] { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transform: scaleX(7) scaleY(2); 
 
    top: 100px; 
 
} 
 

 
input:first-of-type {z-index: 1;} 
 
input:checked {display: none;} 
 
input:checked + input {z-index: 1} 
 

 
input:checked:nth-child(1) ~ #box-one {transform: translateX(100px);} 
 
input:checked:nth-child(2) ~ #box-one {transform: translateX(200px);} 
 
input:checked:nth-child(3) ~ #box-one {transform: translateX(300px);} 
 
input:checked:nth-child(4) ~ #box-one {transform: translateX(400px);} 
 
input:checked:nth-child(5) ~ #box-one {transform: translateX(500px);} 
 
input:checked:nth-child(6) ~ #box-one {transform: translateX(600px);} 
 
input:checked:nth-child(7) ~ #box-one {transform: translateX(700px);} 
 
input:checked:nth-child(8) ~ #box-one {transform: translateX(800px);} 
 
input:checked:nth-child(9) ~ #box-one {transform: translateX(900px);} 
 
input:checked:nth-child(10) ~ #box-one {transform: translateX(1000px);}

<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"> 
 
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"> 
 
<div id="box-one"></div> 
 
<button>Move</button>

Źródło

2015-04-10 20:25:00

Spróbujmy użyciu .animate() do wykonania tego zadania.

$(document).ready(function(){ 
    $('#b1').click(function(){ 
     $('#box-one').animate({ 
      "left":  "+=100px" 
     }, "slow"); 
    }); 
});

Będziemy musieli nieco zmodyfikować nasz CSS. Miejmy pozbyć transition i dodać atrybut position:

#box-one 
{ 
    background-color: blue; 
    height: 100px; 
    width: 100px; 
    position: relative; 
}

Źródło

2015-04-10 19:22:41

Myślę, że odpowiedź na to będzie: nie, nie można zrobić wyłącznie z CSS ... A może po prostu „nie w tej chwili”.

HTML i CSS to języki deklaratywne, które opisują, jak strona powinna się organizować i jak powinna być reprezentowana przez przeglądarkę. Ale są "statyczne": nie zmieniają się, albo przynajmniej same się nie zmieniają (ponieważ można je zmienić za pomocą języków skryptowych, takich jak JavaScript).

Z tego powodu, aw danym przypadku za każdym razem, gdy klikniesz przycisk, potrzebny jest inny język, aby śledzić te zmiany i odpowiednio zastosować działanie (jak obecnie robisz przy użyciu JavaScript).

Dlaczego powiedziałem "nie w tej chwili"? Ponieważ CSS ma pewne cechy, które czynią go nieco dynamicznym, a jeśli jest rozszerzony (i zauważ, że to tylko ja śnię), mogą pomóc ci w osiągnięciu takich rzeczy jak opisujesz bez potrzeby JavaScriptu.

Na przykład: counter-reset i counter-increment pozwalają śledzić liczbę wystąpień elementu i można je stosować w content z ::before i ::after. Jeśli zostały one rozszerzone, możesz użyć ich w innych regułach (np. Jako wartość numeryczna), a jeśli śledzą nie tylko elementy, ale selektory (np. :active), możesz osiągnąć to, czego chcesz, bez użycia JavaScript ... ale znowu, to jest moje marzenie.

Źródło

2015-04-10 19:28:59

CSS nie może wykonywać zdarzeń onclick. Jednak na znaczniku zakotwiczenia <a> można użyć klasy psuedo :visited i :active, aby emulować zachowanie kliknięcia. spróbuj tu:: http://jsfiddle.net/8aagpgb4/13/

Jest nieco hackish ale jakoś mam nadzieję, że masz pomysł :)

Źródło

2015-04-10 19:42:08 Spike

spacjami łańcuch można przekształcić wartości na posesji transform. Możesz po prostu odczytywać zastosowaną transformację i dodać translate(100px, 0px) do ciągu znaków, kompensując domyślną wartość none.

przykład praca:

$(document).ready(function(){ 
 
\t $('#b1').click(function(){ 
 
     var transform = $('#box-one').css('transform'); 
 
\t \t $('#box-one').css('transform', (transform !== 'none' ? transform : '') + ' translate(100px, 0px)'); 
 
\t }); 
 
});

#box-one 
 
{ 
 
\t background-color: blue; 
 
\t height: 100px; 
 
\t width: 100px; 
 
\t transition: all 0.3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div id="box-one"></div> 
 
    <button id="b1">Move</button> 
 
</body> 
 
</html>

Eliminuje to potrzebę zmiennej licznika. Nie ma sposobu, aby całkowicie usunąć JavaScript z równania (przynajmniej nie w elastyczny sposób).

Źródło

2015-04-10 19:55:22

Tłumaczenie elementu za każdym razem w stosunku do jego aktualnej pozycji?

Odpowiedz

przykład praca:

Powiązane problemy