Почему строка не движется в пределах определенного интервала?

Я пытаюсь сделать простой код линии, движущейся 1px каждые 20 миллисекунд (smt, как тикер) . Кроме того, вы хотите, чтобы он исчез, как только он достигнет края окна браузера, используя свойство.offsetWidth. К сожалению, я застрял и не знаю, почему он вообще не двигается. Пожалуйста, помогите мне найти ошибку, или, может быть, я иду в неправильном направлении? Спасибо!

<html>
<head>
    <title>Blablabla</title>
    <meta charset ="utf-8">
    <!-- <script type="text/javascript" src="line.js"></script> -->
</head>
<body onload="interval()">
    <div id="line">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
<script type="text/javascript">
    function interval() {
        var line = setInterval(function(){document.getElementById("line").style.left = scroll.offsetWidth}, 20);
    }
</script>
</body>
</html>
Источник

3 ответа

Решение

Взгляните на образец ниже, он имеет комментарии, которые должны помочь вам понять, проверить демо и поиграть с кодом

//set starting offset
var leftOffset = 0;

//assign element to variable
var element = document.getElementById("line");

//css.left requires position.absolute
element.style.position = 'absolute';

//calculate width of element, in display.block it's 100%
element.style.display = 'inline-block';

//assign interval id to a variable for cancelation
var interval = setInterval(function(){
  
  //increase offset by 1
  leftOffset = leftOffset + 1;

  //check if element is sticked  to screen.right
  if(leftOffset + element.offsetWidth < document.body.offsetWidth) {
    //not sticked
    
    //add pixels
    element.style.left = leftOffset + 'px';
  } else {
    //sticked

    //remove interval
    clearInterval(interval);
    
    //hide element
    element.style.display = 'none';
  }
}, 20);
<div id="line">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>

Источник
  • line должно быть absolute позиционируется элемент так, чтобы left css свойство повлияет
  • Я полагаю, вы не упомянули +px(unit) при назначении left недвижимость в interval как element.offsetWidth не возвращается unit со значением [ Ref ]
Источник

Вот мой снимок:

<html>
<head>
    <title>Blablabla</title>
    <meta charset ="utf-8">
    <!-- <script type="text/javascript" src="line.js"></script> -->
</head>
<body>
    <div id="line">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
<script type="text/javascript">
number = 5; //should be increased each time
setInterval(function(){var d = document.getElementById('line');
d.style.position = "absolute";
number++; //increase number
d.style.left = number; //move the div according to the number
}, 200); //notice that you can increase/decrease 200 according to your will

</script>
</body>
</html>
Источник
Другие вопросы по тегам