Il mio obiettivo è translate il riquadro lungo l'asse "X" di 100px ogni volta che si fa clic sul pulsante. In qualche modo l'ho reso possibile utilizzando una variabile temp in jQuery. Esiste un altro modo in cui questo può essere ottenuto esclusivamente tramite CSS in modo tale che quando si fa clic sul pulsante, la casella dovrebbe translate100px dalla posizione corrente?Traduci un elemento ogni volta in relazione alla sua posizione attuale?

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>

fonte

2015-04-10 Anonymous

Vedo che possibile con solo i CSS – Gael

Questo è un pò un metodo css pura - https: // jsfiddle .net/xqzfL9e1 / – Tasos

Ecco un metodo CSS puro, anche se è un po 'pazzo.

Aggiungere più ingressi (e CSS associato) in base alle esigenze:

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>

fonte

2015-04-10 20:25:00

Proviamo ad usare .animate() per completare questa operazione.

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

Avremo bisogno di modificare leggermente il nostro CSS. Liberiamoci di transition e aggiungere un attributo position:

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

fonte

2015-04-10 19:22:41

Penso che la risposta a questo sarà: no, non è possibile farlo esclusivamente con i CSS ... O forse solo "non in questo momento".

HTML e CSS sono linguaggi dichiarativi che descrivono come deve essere organizzata la pagina e come deve essere rappresentata dal browser. Ma sono "statici": non cambiano, o almeno non cambiano da soli (dato che possono essere cambiati usando linguaggi di script come JavaScript).

Per questo motivo, e nel caso specifico, ogni volta che si fa clic sul pulsante, è necessaria una lingua diversa per tenere traccia di tali modifiche e applicare un'azione di conseguenza (come si sta facendo attualmente con JavaScript).

Perché ho detto "non in questo momento"? Perché il CSS sta ottenendo alcune caratteristiche che lo rendono leggermente dinamico, e se esteso (e si noti che questo è solo me sognando), potrebbero aiutarti a realizzare cose come le descrivi senza bisogno di JavaScript.

Ad esempio: counter-reset e counter-increment permettono di tenere traccia del numero di occorrenze di un elemento, e possono essere utilizzati nella content di ::before e ::after. Se sono stati estesi in modo da poterli utilizzare in altre regole (ad esempio: come valore numerico) e se tenessero traccia di non solo elementi ma selettori (ad esempio: :active), è possibile ottenere ciò che si desidera senza usare JavaScript ... ma di nuovo, sono io che sto sognando ad occhi aperti.

fonte

2015-04-10 19:28:59

Il CSS non può fare eventi onclick. Tuttavia sul tag di ancoraggio <a> è possibile utilizzare la classe di psuedo :visited e :active per emulare un comportamento di clic. provare qui:: http://jsfiddle.net/8aagpgb4/13/

Questo è un po 'hackish ma in qualche modo mi auguro che si ottiene l'idea :)

fonte

2015-04-10 19:42:08 Spike

È possibile catena di spazio delimitato da trasformare i valori sulla proprietà transform. Potresti semplicemente leggere di nuovo la trasformazione applicata e aggiungere translate(100px, 0px) alla stringa, compensando il valore predefinito none.

di lavoro Esempio:

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

Questo elimina la necessità di una variabile contatore. Non c'è modo di rimuovere completamente JavaScript dall'equazione (almeno non in modo flessibile).

fonte

2015-04-10 19:55:22

Traduci un elemento ogni volta in relazione alla sua posizione attuale?

risposta

di lavoro Esempio:

Problemi correlati