Как сделать несколько бегущих строк?
Ребят нужно сделать обычную бегущую строку, состоящую из нескольких сообщений.
Например: 1) Добро пожаловать на сайт! 2) Для скачивания файлов нужно зарегистрироваться! 3) Если у вас возникнут вопросы пишите Администратору! В общем. Нужно чтобы сперва первое сообщение пробежало до конца, а затем второе и т.д Обычный Тег <marquee> позволяет выполнить сценарий одного сообщения под разными методами отображения. А вот как сделать так чтобы сообщений было несколько. Чтобы они показывались по очереди. По истечению определенного времени. |
Самое простое сделать одну бегущую строку, разделив фразу нужным пробелом из тонкой прозрачной картинки (очевидно их будет две)
Размер картинки подобрать чтобы следующая фраза начиналась якобы с начала <marquee>. Можно подбирать c помощью width="XXX" в прозрачке Высоту задать постоянную height="12" |
а существуют ли нестандартные решения с помощью скриптов? нужно сделать чтобы в нужном месте красиво сменялись сообщения. одна за другой.
|
infoToggle смена текста
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>
|
infoToggle random text
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>
|
как вариант
<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>
|
| Часовой пояс GMT +3, время: 15:49. |