圖像滑塊不穩定

我已經將一個普通的javascript/css圖像滑塊放在一起，開始時只是一個學習練習，但現在正在尋找應用它在現實世界中。問題在於我的桌面（這是一款高規格的遊戲平臺）上的動畫不穩定 - 在手機上甚至更糟（在某種程度上它不再是一個動畫）圖像滑塊不穩定

您可以在動作中看到它在這裏：

www.chrishowie.co.uk/sands/

的jsfiddle隔離很多相關代碼的 - 這不是一個「這不工作」的問題，所以希望小提琴給予足夠的幫助優化它。

http://jsfiddle.net/9aozrxy8/5/

總結：我有一排4倍的圖像的DIV，每個圖像是100％的頁面的寬度。我使用JavaScript來translateX（我曾嘗試translate3d，因爲聽說這使用GPU，但沒有做出很多差異），我設置了CSS轉換以緩解 - 在轉換中。

我也認爲我可能只是想在這個網站上做太多 - 但是接下來我會看到其他一些網站做得更多，它像絲綢一樣流暢。所以我想我錯過了一些東西。

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);

}

更新：仍然沒有得到解決，但在移動設備上我已可通過降低圖像的大小爲小屏幕，也不會顯示圖像是在屏幕之外。不是很順利，但到達那裏。

非常感謝，

來源

2014-10-16 Bruford

更改的setTimeout到較慢的速度即3500，測試後降低值，直到它是可以接受的。 – jeff 2014-10-16 22:48:56

無論如何，滑塊在可用性方面都很糟糕。我建議使用一個已經制作好的，如果你把它投入生產的話，那裏已經有一些很棒的功能 – 2014-10-16 23:50:22

@jeff Timemout功能只是我的解決方案的一部分，它可以阻止堆疊相同的動畫並導致滑動不對齊。在我添加它之前它是波濤洶涌，所以它沒有任何影響。 – Bruford 2014-10-17 08:39:29

像傑里米所提到的，在你的jsfiddle「轉型」問題造成的，它也使你的網站上。

在第221行的「Main.css」中刪除「transition：top ease 2s;」從類.slide

一切正常然後Win8.1 /谷歌瀏覽器/ I7

來源

2014-12-21 19:28:41

圖像滑塊不穩定

回答

相關問題