Вход

Просмотр полной версии : Помогите с бегущей строкой

Lefseq
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>
рони
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
15.07.2019, 13:11
рони, спасибо большое!