javascript - 代码仅限于纯 Javascript；需要jquery翻译

Question

所以，我正在为我的一个好朋友写一个网站。我知道纯 JavaScript，但 jQuery 对我来说只是一团糟。我没有花时间学习它。不过，当我在互联网上找到它时，我不介意使用它。这就是这个jsFiddle发生的事情。当我找到它并用它在我构建的漫画阅读器上切换页面时，我非常高兴。

我希望更改的代码在下面的一个工作示例中（如果 jsFiddle 死了并且有人想要 jsFiddle 用户 jtbowden 提供的这个很棒的代码）。

<html>
<head>

<script type="text/javascript" src="./jquery-1.js"></script>

<script type="text/javascript">

$(window).load(function(){
$('.box').click(function() {

$(this).animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
});

$(this).next().animate({
    left: '50%'
}, 500);
});
})

</script>

<style type="text/css">
body {
padding: 0px;    
}

#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 310px;
overflow: hidden; 
background-color:black; 
}

.box {
position: absolute;
width: 23%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 5px;
margin-left: -25%;
}

img.cover {
position:absolute;
display:block;
margin-left:5%;
margin-right:auto;
top:5%;
height:90%
}

img.cover:hover {
position:absolute;
display:block;
margin-left:auto;
margin-right:auto;
top:0%;
height:100%
}

#box1 {
background-color: green;
left: 30%;
}

#box2 {
background-color: yellow;
}

#box3 {
background-color: red;
}

#box4 {
background-color: orange;
}

#box5 {
background-color: blue;
}
</style>
</head>

<body>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
</body>
</html>

然而，我的朋友不喜欢这个代码，因为他和我一样，看不懂它。这是他的网站，他付给我的薪水足够高，所以他是老板。他要求我将这段代码从 jQuery 重写为纯 JavaScript，以便他能够理解它，这将允许他在未来需要或只是觉得喜欢时进行自己的更改。问题是，我不知道怎么做。我只是找到了我想要的代码，将其添加到站点，并编辑了 CSS 以适应我的需要。我不知道这段代码是如何工作的，也不知道我需要做什么才能使它成为纯 JavaScript。

我告诉他，但他没有退缩。我被限制在网站上使用纯 JavaScript、HTML5 和 CSS3。他不会把剩下的钱付给我，直到它被放入纯 JavaScript 并且租金到期。所以，我有点希望有人能帮助我重新发明轮子，并将这个jsFiddle中的 jQuery 代码翻译成纯 JavaScript。

至少，你能不能带我浏览一下 jQuery 库中的代码和位，并告诉我这是在做什么，而不是移动 left 属性？它是如何显示动画的（我认为，这是 .animate 部分）？我以为浏览器会在中间跳过帧？

我、我的朋友和（最终）我的房东将不胜感激任何帮助。

提前致谢。

编辑：我用 CSS 动画重写了这个：

    <html>
    <head>

    <script type="text/javascript">
    function divSwitch(num) {
    var currentBox=document.getElementById("box"+num);
    if (num>=5) {
    num=0;
    }
    var nextBox=document.getElementById("box"+(num+1));

    var checkedButton = getCheckedRadio(document.forms.setOption.elements.aniOption);
    if (checkedButton) {
    switch(checkedButton.value) {
    case "R":
    currentBox.className="outFromRtL";
    nextBox.className="inFromRtL";
    break;

    case "L":
    currentBox.className="outFromLtR";
    nextBox.className="inFromLtR";
    break;  

    case "N":
    if (currentBox.className!="box") {
    for (var q=1; q<=5; q++) {
    var setBoxBack=document.getElementById("box"+q);
    setBoxBack.className="box";
    }
    }
    currentBox.style.left='-50%';
    nextBox.style.left='50%';
    break;

    default:
    alert("Well... That's not supposed to happen!  How did you break it!?");
    break;
    }
    }
    }

    function getCheckedRadio(radio_group) {
        for (var i = 0; i < radio_group.length; i++) {
            var button = radio_group[i];
            if (button.checked) {
                return button;
            }
        }
        return undefined;
    }
    </script>

    <style type="text/css">
        body {
        padding: 0px;    
    }

    #container {
        position: absolute;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 310px;
        overflow: hidden; 
    background-color:black; 
    }

    .box {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 150%;
        top: 5px;
    }

    .inFromRtL {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: rightSlideIn;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes rightSlideIn {
          from {
            left:150%;
          }
          to {
            left:50%;
          }
    }

    .outFromRtL {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: -50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: rightSlideOut;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes rightSlideOut {
          from {
            left:50%;
          }
          to {
            left:-150%;
          }
    }

    .inFromLtR {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: leftSlideIn;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes leftSlideIn {
          from {
            left:-150%;
          }
          to {
            left:50%;
          }
    }

    .outFromLtR {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 150%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: leftSlideOut;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes leftSlideOut {
          from {
            left:50%;
          }
          to {
            left:150%;
          }
    }

    #box1 {
        background-color: green;
        left: 50%;
    }

    #box2 {
        background-color: yellow;
    }

    #box3 {
        background-color: red;
    }

    #box4 {
        background-color: orange;
    }

    #box5 {
        background-color: blue;
    }
      </style>
    </head>

    <body>
    <div id="container">
    <div id="box1" class="box" onclick="divSwitch(1);">Div #1</div>
    <div id="box2" class="box" onclick="divSwitch(2);">Div #2</div>
    <div id="box3" class="box" onclick="divSwitch(3);">Div #3</div>
    <div id="box4" class="box" onclick="divSwitch(4);">Div #4</div>
    <div id="box5" class="box" onclick="divSwitch(5);">Div #5</div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="animationOptions">
    <form id="setOption">
    <input type="radio" name="aniOption" id="L" value="L" checked="true">Left to Right
    <input type="radio" name="aniOption" id="R" value="R">Right to Left
    <input type="radio" name="aniOption" id="N" value="N">None
    </form>
    </div>
    </body>
    </html>

是的，它需要更多的代码，但它仍然只有 5kb，而且我不需要 75kb 的 jQuery 文件。

score 3 · Accepted Answer

有两种方法可以解决这个问题，首先使用jsapi.info它会显示具体方法和函数的来源，另一种方法只是查看和研究源代码，这就是我在某些人没有好的文档时所做的模块或一些库，正如 Paul Irish 所说的“专业文档”，因为你知道纯 JavaScript，所以你应该很容易阅读。希望有帮助。

score 2 · Accepted Answer

它不可能比它更简单。如果你展开 jQuery，你会发现它背后的代码相对于你现在看到的来说非常复杂。查看 jquery.com 文档中的方法会更容易。我会为你评论。

// when the window is loaded, do the code within
$(window).load(function() {
  // now i can assign events since the dom is loaded
  // but you could use $(document).ready instead

  // when any class with "box" is clicked, do the code within
  // this is binding a click event to all elements having a "box" class
  $('.box').click(function() {

    // animate the currently clicked "box" element
    $(this).animate({
      // move it left 50% and take 500 milliseconds to do it
      left: '-50%' 
    }, 500, function() {
      // the code here is called once the animation has completed
      // set the style to left 150%
      $(this).css('left', '150%');
      // put the box inside the element with id=container
      $(this).appendTo('#container');
    });

    // animate the element just next to the box element 
    // moving it left 50% taking 500 milliseconds to do it.
    $(this).next().animate({ left: '50%' }, 500);

  });

});

现在想象一下，您必须使用 setInterval 和缓动函数编写动画代码，更不用说跨浏览器事件了。让这段代码更长更复杂 10 倍，你可能会做类似的事情。

javascript - 代码仅限于纯 Javascript；需要jquery翻译

2 回答 2

Related

Reference