javascript - 左右键连续移动框

Question

试图左右移动.popup按钮上的课程不断从左到右和从右到左移动..

这是js小提琴。

HTML：

<button class="right">Right</button>
<button class="left">Left</button>
<div class="popup">
    Popup
</div>

Answer 1

你错过了 .popup div 的 left 属性

 .popup {
    width: 200px;
    height: 50px;
    border: 1px dashed #000;
    position: absolute;
    top: 100px;
    left:0px;
 }

您可以按如下方式改进您的脚本：

$(document).ready(function () {
    var left = parseInt($(".popup").css('left'));
    var refreshIntervalId;
    $(".left").on('mousedown', function () {
        refreshIntervalId = setInterval(function () {
            $('#counter').html(parseInt($('#counter').html()) + 1);
            left += 5;
            $(".popup").css({"left": left})
        }, 10);
    })
    $(".left").on('mouseup', function () {
        clearInterval(refreshIntervalId);
    })
    $(".right").on('mousedown', function () {
        refreshIntervalId = setInterval(function () {
            $('#counter').html(parseInt($('#counter').html()) - 1);
            left -= 5;
            $(".popup").css({"left": left});
        }, 10);
    })
    $(".right").on('mouseup', function () {
        clearInterval(refreshIntervalId);
    })
});