Ho messo insieme un semplice cursore di immagini javascript/css, iniziato come un semplice esercizio di apprendimento ma ora sto cercando di applicarlo nel mondo reale. Il problema è che l'animazione è instabile sul mio desktop (che è una piattaforma di gioco ad alta definizione) e anche peggio su un cellulare (nella misura in cui non è più un'animazione)Il dispositivo di scorrimento delle immagini è instabile
Puoi vederlo in azione qui:
www.chrishowie.co.uk/sands/
jsfiddle isola gran parte del codice pertinente - non è un "non funziona" questione, quindi speriamo che il violino dà abbastanza per aiutare ottimizzarlo .
http://jsfiddle.net/9aozrxy8/5/
In sintesi: ho un DIV con 4 immagini in una riga, ciascuna immagine è 100% della larghezza della pagina. Io uso javascript per tradurreX (ho provato translate3d come sentito usare questa GPU, ma non ha fatto molta differenza) e ho impostato le transizioni CSS per facilitare la trasformazione.
Ho anche pensato che potenzialmente sto solo cercando di fare troppo su questo sito - ma poi guardo altri siti facendo molto di più ed è liscia come la seta. Quindi credo che mi manchi qualcosa.
function slideRight() {
if (sliding) {
return false
};
window.sliding = true;
el = document.getElementById("slider");
cst = getComputedStyle(el);
transformst = cst.transform || cst.webkitTransform || cst.mozTransform;
widthst = cst.width;
widthst = widthst.replace("px", ""); // computed width of slider (7680px)
slidewidth = widthst/4;
transformst = transformst.replace("matrix(", "");
transformst = transformst.replace(")", "");
transformst = transformst.split(",");
transformst = transformst[4]; // returns current transform in px without unit (px)
if (!transformst) {
transformst = 0;
}
var activebtn = "sldr" + Math.round((Number(transformst)/(-1 * slidewidth)));
document.getElementById(activebtn).classList.remove("sliderbuttonactive");
if (activebtn != "sldr3") {
document.getElementById("slider" + Math.round((2 + Number(transformst)/(-1 * slidewidth)))).style.visibility = "visible";
document.getElementById("slider" + Math.round((2 + Number(transformst)/(-1 * slidewidth)))).style.display = "initial";
document.getElementById("slider").style.transform = "translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-webkit-translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-moz-translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-ms-translate3d(" + 25 * ((Number(transformst)/(slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("leftslidebtn").style.visibility = "visible";
document.getElementById("leftslidebtn").style.display = "block";
}
activebtn = activebtn.replace("sldr", "");
activebtn = "sldr" + (1 + Number(activebtn));
document.getElementById(activebtn).classList.add("sliderbuttonactive");
if (Number(activebtn.replace("sldr", "")) == 3) {
document.getElementById("rightslidebtn").style.visibility = "hidden";
document.getElementById("rightslidebtn").style.display = "none";
}
setTimeout(function() {
window.sliding = false
}, 2000);
}
aggiornamento: persiste ma sul dispositivo mobile hanno reso utilizzabile riducendo le dimensioni dell'immagine per piccoli schermi e le immagini anche non visualizzazione che sono fuori dello schermo. Non perfettamente liscio ma arrivando.
Grazie mille,
C
Modificare il setTimeout a una velocità più lenta vale a dire 3500, prova quindi diminuire il valore fino a quando non è accettabile. – jeff
Lo slider è piuttosto rotto quando si tratta comunque di usabilità. Ti consiglio di utilizzarne uno già creato se lo hai messo in produzione, ce ne sono alcuni grandi già là –
@jeff la funzione Timemout è solo una parte della mia soluzione per fermare la stessa animazione che viene impilata e risultante in un dispositivo di scorrimento disallineato. Era choppy prima che lo aggiungessi, quindi non ha avuto alcun impatto. – Bruford