Question

我正在尝试创建一个div，它从屏幕的左侧向右移动，反复出现。我想让它看起来好像是在轴上摆动。我有当前的代码，但是，有时当你加载页面时，div从左向右移动然后再次卡住试图向右移动。

   moveBlock: function(){
    var madeRight = false;
    $('.curBlock').css({"left": "2%"});
    intv = setInterval(function(){
        var curBlock = $('.curBlock');
        if(parseInt($(".curBlock")[0].style.left.replace("%", "")) < 42 && parseInt($(".curBlock")[0].style.left.replace("%", "")) > 1 && !madeRight){
            console.log("hi");
            $('.curBlock').css({"left": parseInt($(".curBlock")[0].style.left.replace("%", "")) + 1+"%"});
        }else if(parseInt($(".curBlock")[0].style.left.replace("%", "")) > 1 || parseInt($(".curBlock")[0].style.left.replace("%", "")) == 42){
            madeRight = true;
            $('.curBlock').css({"left": parseInt($(".curBlock")[0].style.left.replace("%", "")) - 1+"%"});
        }else{
            clearInterval(intv);
        }
    }, 50)
},
  processBlock: function(){
    setInterval(game.moveBlock(), 1000);
  }

非常感谢任何帮助实现这一目标。

感谢。： - ）

Answer 1

考虑CSS动画：

setTimeout(function() { 
  var element = document.getElementById("d1"); 
  document.body.appendChild(element.cloneNode(true)); 
  element.classList.toggle("sidetoside"); 
}, 2500);

@keyframes slide {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

.sidetoside {
  -o-animation: slide 2s linear 0s infinite alternate;
  -moz-animation: slide 2s linear 0s infinite alternate;
  -webkit-animation: slide 2s linear 0s infinite alternate;
  animation: slide 2s linear 0s infinite alternate;
}

<div id="d1" class="sidetoside">
  I'm a div! I move!
  <p>
    I'm more text in the div!
  </p>
</div>

您也可以使用AnimationEvent来响应动画中的更改。

反复滑动div左右

1 个答案: