0

ボタンを使用して、最初のクリックで画像をページの右上隅に移動し、2 回目のクリックで元の位置に戻そうとしています。私は JS を初めて使用するので、それ以上のクリックは単純にサイクルを続けます。どの addEventListeners を使用するのか正確にはわかりません。前もって感謝します

HTML:

<div id="task2" class="task">
    <h2>Task 2</h2>

    <!-- image courtesy Google Chrome -->       
    <img src="media/chrome.png" alt="Chrome Browser" id="chrome_browser">

    <ol>
        <li>First click: Move the Chrome icon to the top, right corner of the page.</li>
        <li>Second click: Move the Chrome icon back to it's original spot.</li>
        <li>Further clicks: Continue the cycle.</li>
    </ol>
    <input type="button" value="Move" id="task2control">        
</div>
4

4 に答える 4

1

jQuery を使用して画像クラスを切り替え、CSS を使用してクラスに基づいて画像の位置を調整できます。

$('#task2control').click(function(){
    $('img').toggleClass('top');
});

ジャスフィドル

于 2013-10-29T15:56:36.770 に答える
0

あなたのサイトでjqueryを使用することはオプションですか? 次に、私が思いついたものを見ることができます。

あなたの動画にクラスを追加しました

<img src="media/chrome.png" alt="Chrome Browser" id="chrome_browser" class="original-pos">

単純なクリックイベントでその存在を確認して、divの位置を切り替えます。

$(document).ready(function(){
    var originalTop = $('#chrome_browser').css('top');
    var originalLeft = $('#chrome_browser').css('left');

    $('#task2control').on('click', function(){
        var image = $('#chrome_browser');

        if(image.hasClass('original-pos')){
            image.animate({
                top : "0px",
                left: "0px"
            }, function(){
                image.removeClass('original-pos');
            });
        } else {
             image.addClass('original-pos');
             image.animate({
                top: originalTop,
                left: originalLeft
            });
        }
    });
});

jsfiddleで確認してください。

于 2013-10-29T15:59:26.603 に答える