Форум

Georgian · #1 (**permalink**) 19.04.2016, 18:26

Ребят нужно сделать обычную бегущую строку, состоящую из нескольких сообщений.

Например:
1) Добро пожаловать на сайт!
2) Для скачивания файлов нужно зарегистрироваться!
3) Если у вас возникнут вопросы пишите Администратору!

В общем. Нужно чтобы сперва первое сообщение пробежало до конца, а затем второе и т.д

Обычный Тег <marquee> позволяет выполнить сценарий одного сообщения под разными методами отображения. А вот как сделать так чтобы сообщений было несколько. Чтобы они показывались по очереди. По истечению определенного времени.

Deff · #2 (**permalink**) 19.04.2016, 21:03

Самое простое сделать одну бегущую строку, разделив фразу нужным пробелом из тонкой прозрачной картинки (очевидно их будет две)
Размер картинки подобрать чтобы следующая фраза начиналась якобы с начала <marquee>. Можно подбирать c помощью width="XXX" в прозрачке
Высоту задать постоянную height="12"

Georgian · #3 (**permalink**) 19.04.2016, 21:27

а существуют ли нестандартные решения с помощью скриптов? нужно сделать чтобы в нужном месте красиво сменялись сообщения. одна за другой.

рони · #4 (**permalink**) 20.04.2016, 01:22

Georgian,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8"><style type="text/css">
.info{
  margin: 10px auto;
  overflow: hidden;
  border: 2px solid #FF00FF;
  transition: all .8s ease-out;
  padding: 2px 4px;
}
.info span{
  display:  inline-block;
  white-space: nowrap;
}

</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$.fn.infoToggle = function(d) {
    var a = $.extend(!0, {
        spide: 5000,
        pause: 3000,
        text: ["test"]
    }, d);
    return this.each(function(d, e) {
        var b = $("<span/>").appendTo(e),
            f = 0;
        (function g() {
            b.text(a.text[f++ % a.text.length]);
            var c = b.width();
            $(e).width(c);
            b.css({
                "margin-left": 2 * c
            }).animate({
                "margin-left": 0
            }, a.spide, function() {
                $(this).delay(a.pause).animate({
                    "margin-left": -(c + 10)
                }, a.spide, g)
            })
        })()
    })
};
$(function(){
$('.info').infoToggle({text:["Добро пожаловать на сайт!", "Для скачивания файлов нужно зарегистрироваться!","Если у вас возникнут вопросы пишите Администратору!"]});
});
  </script>
</head>

<body>
<div>
    <p class="info"></p>

</div>
</body>
</html>

рони · #5 (**permalink**) 20.04.2016, 10:30

Georgian,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8"><style type="text/css">
.info{
  margin: 10px auto;
  overflow: hidden;
  border: 2px solid #FF00FF;
  transition: all .8s ease-out;
  padding: 2px 4px;
}
.info span{
  display:  inline-block;
  white-space: nowrap;
}
h2{
   text-align: center;
}

</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$.fn.infoToggle = function(d) {
    var a = $.extend(!0, {
        spide: 5000,
        pause: 3000,
        text: ["test"],
        rand: true
    }, d);
    return this.each(function(d, e) {
        var b = $("<span/>").appendTo(e),
            f = 0;
        (function g() {
            b.text(a.text[f]);
            f = a.rand ?  Math.random()*a.text.length|0 : ++f % a.text.length;
            var c = b.width();
            $(e).width(c);
            b.css({
                "margin-left": 2 * c
            }).animate({
                "margin-left": 0
            }, a.spide, function() {
                $(this).delay(a.pause).animate({
                    "margin-left": -(c + 10)
                }, a.spide, g)
            })
        })()
    })
};
$(function(){
$('.up').infoToggle({text:["Добро пожаловать на сайт!", "Для скачивания файлов нужно зарегистрироваться!","Если у вас возникнут вопросы пишите Администратору!"],rand: false});
$('.dn').infoToggle({text:["Добро пожаловать на сайт!", "Для скачивания файлов нужно зарегистрироваться!","Если у вас возникнут вопросы пишите Администратору!"], pause : 5000});
});
  </script>
</head>

<body>
<div>
    <h2>cycle</h2>
    <p class="info up"></p>
    <h2>random</h2>
    <p class="info dn"></p>
</div>
</body>
</html>

NeoN · #6 (**permalink**) 21.04.2016, 22:37

как вариант

<script language="javascript">
function marqueeEvent(){
	
	var list = ["Для скачивания файлов нужно зарегистрироваться!",	"Если у вас возникнут вопросы пишите Администратору!","Добро пожаловать на сайт!"];
	if(++marqueeEvent.count == list.length) marqueeEvent.count=0;
	document.getElementById('marquee').innerHTML = list[marqueeEvent.count];
	document.getElementById('marquee').start();
	
	
}
marqueeEvent.count = -1;
</script>
<marquee id='marquee' onFinish="marqueeEvent()" loop="1"> Добро пожаловать на сайт! </marquee>

Форум

Справочник

Discord чат

Курсы javascript