Форум

Lefseq · #1 (**permalink**) 15.07.2019, 11:31

Все привет. Имеется код простой бегущей строки, движение снизу-вверх. Подскажите, как исправить этот код так, чтобы при обновлении страницы строчки начинали двигаться не с самого низа, а продолжали движение находясь у верхней границы?

<div class="marquee-6">
<marquee bgcolor="#f9f9f9" scrollamount="1" direction="up"><br />
 
<div style="background:#FF0000; margin-bottom:20px;">1111111111</div>
 
<div style="background:#FF0000; margin-bottom:20px;">22222222222</div>
 
<div style="background:#FF0000; margin-bottom:20px;">333333333333</div>
 
<div style="background:#FF0000; margin-bottom:20px;">4444444444444</div>
 
<div style="background:#FF0000; margin-bottom:20px;">555555555555555</div>
 
<div style="background:#FF0000; margin-bottom:20px;">6666666666666</div>
 
<div style="background:#FF0000; margin-bottom:20px;">77777777777</div>
 
<div style="background:#FF0000; margin-bottom:20px;">8888888888888</div>
 
<div style="background:#FF0000; margin-bottom:20px;">99999999999999</div>
 
</marquee>
</div>

рони · #2 (**permalink**) 15.07.2019, 12:50

Lefseq,
startVisible
https://github.com/aamirafridi/jQuery.Marquee

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
  height: 300px;
}


  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
  <script>
$(function() {
    $('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 15000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'up',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true,
    startVisible : true
});
});
  </script>
</head>

<body>
<div class="marquee">
<div style="background:#FF0000; margin-bottom:20px;">1111111111</div>

<div style="background:#FF0000; margin-bottom:20px;">22222222222</div>

<div style="background:#FF0000; margin-bottom:20px;">333333333333</div>

<div style="background:#FF0000; margin-bottom:20px;">4444444444444</div>

<div style="background:#FF0000; margin-bottom:20px;">555555555555555</div>

<div style="background:#FF0000; margin-bottom:20px;">6666666666666</div>

<div style="background:#FF0000; margin-bottom:20px;">77777777777</div>

<div style="background:#FF0000; margin-bottom:20px;">8888888888888</div>

<div style="background:#FF0000; margin-bottom:20px;">99999999999999</div>

</div>

</body>
</html>

Lefseq · #3 (**permalink**) 15.07.2019, 13:11

рони, спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript