-1

だから、私は私の親友のためにウェブサイトを書いています。私は純粋な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にするために何をする必要があるのか​​わかりません。

私は彼に言ったが、彼は後退していない。Webサイトでは純粋なJavaScript、HTML5、CSS3に制限されています。純粋なJavaScriptに入れられ、家賃が支払われるまで、彼は残りのお金を私に支払うつもりはありません。ですから、誰かが車輪の再発明をして、このjsFiddleのjQueryコードを純粋なJavaScriptに変換するのを手伝ってくれることを望んでいました。

少なくとも、jQueryライブラリのコードとビットについて説明し、左側のプロパティをシフトする以外に、これが何をしているのかを正確に教えてください。アニメーションはどのように表示されますか（私はそれを取ります、これは.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ファイルは必要ありません。

4

2 に答える 2

3

これにアプローチする方法は2つあります。最初にjsapi.infoを使用すると、特定のメソッドと関数のソースが表示されます。もう1つの方法は、ソースコードを調べて調べることです。これは、一部のドキュメントが利用できない場合に行う方法です。モジュールまたはいくつかのライブラリ、そしてPaul Irishがそれを「専門家向けのドキュメント」と呼んでいるように、純粋なJavaScriptを知っているので、読みやすいはずです。それがお役に立てば幸いです。

于 2013-02-02T16:34:07.263 に答える
2

これをこれよりも単純にすることはできません。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倍長く複雑にすると、おそらく同様のことを行うことになります。

于 2013-02-02T16:52:05.607 に答える