使用 jQuery: 左: -100% 计算 CSS

Question

我正在尝试创建与Google Play相同的屏幕截图视图逻辑。

问题：

如果您单击任何Google Play应用程序(例如链接)上的屏幕截图，图片会放大，每次单击"下一个屏幕截图"都会更改style="left: -100%">style="left: -200%">style="left: -300%"<div class="expand-pages-container" style="left: -100%">...</div>。

单击"上一步"按钮将 +100%添加到left:：style="left: -300%">style="left: -200%">style="left: -100%"

有没有人知道如何用jQuery实现这一切？非常感谢

Answer 1

类似的东西？ https://jsfiddle.net/Platonow/fo5ft3gj/12/

document.getElementById("left").addEventListener("click", function() {
move(100);
});
document.getElementById("right").addEventListener("click", function() {
move(-100);
});
var move = function(diffrencePercentage) {
let images = document.getElementsByClassName("expand-pages-container")[0].getElementsByTagName("IMG");
for(let i=0; i<images.length; i++) {
images[i].style.left = (parseInt(images[i].style.left) + diffrencePercentage) + "%";
}
};

Answer 2

对于您在问题中提供的信息，答案如下：

var hundred = parseInt($('div').css('left').replace(/px|-/, '')));
// in this line we find how much 100% means in pixels.
var left = parseInt($('div').css('left').replace('px', '')));
// this is the actual position
$('.right-button').click(function () {
left -= hundred;
$('div').css('left', left + 'px');
});
$('.left-button').click(function () {
left += hundred;
$('div').css('left', left + 'px');
});