Javascript “检测”；对",；从body开始，添加100

我正在使用一支笔在视口中移动主体，并在窗口外模拟页面

我已经编写了一个脚本，它将检测“正确的”css声明，并100%地添加或减去以模拟围绕内容移动的视口。我想这样做与顶部使用

var=vertical

我不太擅长Javascript，所以请告诉我是否有更简单的方法来处理我的变量。意识到

.css

提取字符串后，我不得不使用

parseInt

$('.right.arrow-link').click(function () {
    var vertical = parseInt($('body').css('top'), 10);
    var horizontal = parseInt($('body').css('right'), 10);
    var newhorizontal = horizontal + 100;
    var newhorizontal = newhorizontal.toString() + '%';
    $('body').css('right', newhorizontal);
});
$('.left.arrow-link').click(function () {
    var horizontal = parseInt($('body').css('right'), 10);
    alert(horizontal);
    var newhorizontal = horizontal - 100;
    var newhorizontal = newhorizontal.toString() + '%';
    $('body').css('right', newhorizontal);
});

---

编辑它：

在左箭头单击时，不希望它移动屏幕宽度的100%，只希望它移回页面的开头。如果将有多个区段，您必须调整此值以移动您移动的区段的宽度，但：

$('.left.arrow-link').click(function() {
    var horizontal = parseInt($('body').css('right'), 10);
    var newhorizontal = 0;

    newhorizontal = newhorizontal.toString() + '%';

    $('body').css('right', newhorizontal);
});

以下是跟踪包装并将其移动到当前包装宽度的解决方案：

$(document).ready(function() {
    var currentWrapper = 1;

    $('.right.arrow-link').click(function() {

        var vertical = parseInt($('body').css('top'), 10);
        var horizontal = parseInt($('body').css('right'), 10);
        var newhorizontal = horizontal + 100;

        newhorizontal = newhorizontal.toString() + '%';

        $('body').css('right', newhorizontal);

        currentWrapper++;
    });

    $('.left.arrow-link').click(function() {
        var horizontal = parseInt($('body').css('right'), 10);
        var newhorizontal = horizontal - $(".wrapper.page-" + currentWrapper).width;

        newhorizontal = newhorizontal.toString() + '%';

        $('body').css('right', newhorizontal);

        if(currentWrapper > 1)
            currentWrapper--
    });
});

---

使用CSS转换，每次单击只跟踪水平和垂直数字。您需要在.wrapper上进行CSS转换，以使所有内容都具有良好的动画效果

 .wrapper {
     transition: all 0.3s ease-out;
     -webkit-transition: all 0.3s ease-out;
 }

但是，每次单击都会重新定义垂直和水平变量，这会重置这些变量，并且不可能在后续页面的左侧和右侧添加更多的框和网格。这导致了东西四处飞扬。[编辑：上下相加]尝试以下操作：

$(document).ready(function() {
  var vertical = 0;
  var horizontal = 0;

  $('.right.arrow-link').click(function(){

        horizontal -= 100;
        $('body').css('left', horizontal + '%');

   });

    $('.left.arrow-link').click(function(){

        horizontal += 100;
        $('body').css('left', horizontal + '%');
   });
   $('.up.arrow-link').click(function() {
        vertical -=100;
        $('body').css('top', vertical + '%');
   });
   $('.down.arrow-link').click(function() {
        vertical +=100;
        $('body').css('top', vertical + '%');
   });
});

带有转换的.wrapper样式假定所有额外页面都将使用该类。这将一下子为他们所有人设置CSS过渡动画

另外，请注意，在CSS中，您只在几个地方指定了-webkit转换，这使得FireFox中出现了这一突破。您也可以通过添加转换版本来解决这个问题

---

需要澄清的是：问题是当我单击右箭头时，它会加载页面，但当我单击左箭头时，它不会返回默认屏幕（看起来这就是我刚刚尝试的问题）。准确吗？是的，左箭头应返回主屏幕。基本上，左箭头应该读取主体的当前“右”位置并减去100%。因此，如果在默认屏幕上单击左箭头，它将设置为body to

right:-100%编辑：新的<代码>右侧声明似乎受窗口大小的影响。如果我在左侧有一个页面，单击默认页面上的左箭头，则此操作无效。否，这就是为什么我说如果你想在屏幕上移动多次，你必须得到每个部分的宽度。我添加了另一个版本，它使用当前包装的宽度，宽度总是100%，这就是为什么我想简单地加或减100%。对于Javascript来说，这难道不是一个简单的数学问题吗？这会给你整个屏幕的宽度，不是吗？您希望它只移动当前显示的.wrapper.page-#的宽度。您好，谢谢您的提示。我只是打算自己使用它，这就是为什么我没有编写转换前缀的原因。您的解决方案是我最初想到的，但是为每一页声明这一点会很烦人。（如果我向右翻了15页怎么办？）这就是为什么我想找出为什么左箭头把身体摆得这么远。啊，明白了！请在你的问题中加入这一考虑，因为这肯定会改变我的回答方式。我将再次查看您的代码并更新.Updated。这继续假设每个页面都是100%宽度。你可以很容易地用一个页面宽度的变量来更新它，或者在浏览器调整大小时跟踪它。这很有效。第一次转换不起作用，但我正在研究这一点。同样的逻辑也起作用，我的新更新中所有这些都起作用了：。对不起，我没有投票权，否则我会的！