javascript - 从正文中检测到 "right"并添加 100

Question

我正在研究一支笔，通过视口(viewport)移动 body 并模拟窗口外的页面。

我编写了一个脚本，它将检测“正确的”css 声明并增加或减少 100% 以模拟视口(viewport)在内容周围移动。我想在顶部使用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);
});

编辑 Here :

Answer 1

使用 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-transform，这在 FireFox 中造成了中断。您也可以通过添加转换版本来解决这个问题。

http://codepen.io/anon/pen/nsJDr