Форум

GrizzlyBear · #1 (**permalink**) 05.06.2012, 17:57

Помогите пожалуйста
Как сделать так чтоб бегущая строка допустим:
Сама строка - несколько предложений.
Двигаются они с низу в верх,сначала одно предложение останавливается около края верхнего на не сколько секунд, а потом двигается дальше, затем второе предложение также и так по очереди до бесконечности
Знаю как сделать чтобы строка двигалась с низу вверх и останавливалась путем HTML.
не знаю только как сделать чтобы замерала она не несколько секунд и продолжала движение, делается это с помощью джаваскрипт помогите (

вот код HTMl

<marquee height="100" width="300" bgcolor="#999" direction="up">
<div>предложение1</div>
<div>предложение2</div>
<div>предложение3</div>
</marquee>

нужно чтобы сначала предложение1 доходило до верхнего края и останавливалось на несколько секунд
потом опять продолжалось движение
и предложение2 доходило до края и останавливалось
потом предложение3
а потом снова первое и так далее до бесконечности

В гугле искал дельного ничего не нашел

Я и в теме работа написал
Честно говоря не думаю что это прям ну очень сложный код который можно покупать, поэтому представление о его стоимости вообще не имею

Джэксон · #2 (**permalink**) 05.06.2012, 19:58

Бегущая строка на js
Вот почитайте и переделайте код под себя

GrizzlyBear · #3 (**permalink**) 05.06.2012, 20:42

помоги разобраться пожалуйста

Вот код который сейчас у меня в HTML

<marquee height="100" width="300" bgcolor="#999" direction="up">
<div>предложение1</div>
<div>предложение2</div>
<div>предложение3</div>
</marquee>

Вот код который по твоей ссылке

var line="Текст бегущей строки здесь";
var i, timer, speed=150;
function start(){
    document.cit.forum.value=" ";
    i=0;
    timer = setInterval('m_line()',speed);
}
function m_line() {
    if(i++<line.length) {
        document.cit.forum.value=line.substring(0,i);
    }
else{
    clearInterval(timer);
    setTimeout('start()',5000);
    }
}

<script language="JavaScript">
start();
</script>

Что куда к чему пристраивать я так и не понял
Мне бы это в первую очередь хоть узнать а дальше сам попробую перестроить под себя

melky · #4 (**permalink**) 05.06.2012, 21:34

Сообщение от GrizzlyBear

нужно чтобы сначала предложение1 доходило до верхнего края и останавливалось на несколько секунд
потом опять продолжалось движение
и предложение2 доходило до края и останавливалось
потом предложение3
а потом снова первое и так далее до бесконечности

поподробнее.

когда предложение1 замирает сверху, другие движутся вверх, или замирают с ним?
после того, когда предложения дойдут до верха, что дальше - они опускаются вниз мгновенно, или анимированно?

кроме того, есть ли запускаемый пример html, под который нужно писать скрипт?

PS я вообще не думаю, что за него нужно платить.

Deff · #5 (**permalink**) 05.06.2012, 21:42

Если есть div - удобно чтобы текущее было единственным пока доходит до верха экрана(иль не наю - до левого края),
Ксать нужно выяснить направленность движения
Как дошло - остановилось и после начала движения и некого отступа от конца первого, появляется следом второе
---------
Как быть - если текст одной фразы - не вошел полностью в экран блока ?

GrizzlyBear · #6 (**permalink**) 05.06.2012, 21:59

поподробнее.

когда предложение1 замирает сверху, другие движутся вверх, или замирают с ним?
после того, когда предложения дойдут до верха, что дальше - они опускаются вниз мгновенно, или анимированно?

кроме того, есть ли запускаемый пример html, под который нужно писать скрипт?

PS я вообще не думаю, что за него нужно платить.

нужно чтобы сначала с низу плавно выезжало "предложение1" доходило до верхнего края и останавливалось на "n" количество секунд.

(при этом "предложение2" не было видно)

после того как "n" количество секунд прошло, движение возобновлялось
"предложение1" уходило вверх и исчезало, а с низу плавно выезжало "предложение2"
оно так же доходило до края и останавливалось на "n" количество секунд.

затем "предложение3" точно так же

а потом снова первое и так далее до бесконечности

(это все должно быть на автомате без всяких наведений курсора и тд. чтобы просто открыл страницу и этот процесс начинался )

HTML пример. ну могу вот так выложить.

<html>
<head>
<title></title>
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<marquee height="100" width="300" bgcolor="#999" direction="up">
<div>предложение1</div>
<div>предложение2</div>
<div>предложение3</div>
</marquee>
</body>
</html>

Если возможно без marquee пусть так, просто знаю что это все и без него сделать можно

melky · #7 (**permalink**) 05.06.2012, 23:22

Я сделал на Кувери, т.к. это было быстрее, чем на native. Надеюсь, Вы не против

.

Сам код скрипта и пример находятся ниже.

Подготовка:

Div-родитель имеет класс "marga". Чтобы изменить его в соотв. требованиям скрипта, меняем указанный селектор.
marga = $("*!*.marga*/!*"),
Анимируемые элементы (т.е. то, что движется) никак не помечены. Это просто дивы.
Чтобы как-то их идентифировать, добавьте им класс, и измените селектор :
divs = marga.find("*!*div*/!*").hide(),
Div-родитель должен иметь позиционирование, отличное от static. В примере я поставил относительное.

Анимируемые элементы должны иметь относительное позиционирование.

Желательно, чтобы Div-родитель имел статическую ширину и высоту.

О настройках эффектов :

Настройки находятся в самом начале скрипта. Все они напрямую передаются методам jQuery.

// время появления (перед анимированием вверх)
      fadeIn_time = 400,
      // время анимирования вверх - всплытия.
      bubble_time = 2000,
      // easing-функция всплытия. см. параметр easing функции animate. 
      bubble_easing = "swing",
      // время ожидания после всплытия.
      stay_time = 2000,
      // время скрытия после всплытия.
      fadeOut_time = 800,

Пример :

<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title></title>
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
  .marga {
    background-color: #BADA55;
    position: relative;
    width: 300px;
    height: 400px;
  }
  .marga div {
    position: relative;
    border: 1px red dashed;
  }
</style>
</head>
<body>
  <div class="marga">
    <div>предложение1</div>
    <div>предложение2</div>
    <div>предложение3</div>
  </div>
<script>
$(function(){
  var 
      fadeIn_time = 400,
      bubble_time = 2000,
      bubble_easing = "swing",
      stay_time = 2000,
      fadeOut_time = 800,
      
      marga = $(".marga"),
      divs = marga.find("div").hide(),
      bottomeness = marga.height(),
      i = 0,
      curr;
  
  (function loop(next){
    
    divs.eq(i - 1).hide();
    
    if (!divs[i]) {
      i = 0;
    }
    curr = divs.eq(i);
    
    curr.
      fadeIn(fadeIn_time).
        css("top", bottomeness - curr.outerHeight()).
          animate({ top: 0 }, bubble_time, bubble_easing).
            delay(stay_time).
              fadeOut(fadeOut_time).
                queue(loop); 
    
    i += 1;
    
    if (next) {
      next();
    }
  })();
  
});
</script>
</body>
</html>

Deff · #8 (**permalink**) 05.06.2012, 23:37

melky,
Симпотно, но, мне кажецо нужно усилить концовку для визуального эффекта, после остановки, стоит уводить строку влево за экран,
чтобы без проблемно увелось, у .marga прописываем
overflow:hidden;

melky · #9 (**permalink**) 05.06.2012, 23:48

Сообщение от Deff

melky,
Симпотно, но, мне кажецо нужно усилить концовку для визуального эффекта, после остановки, стоит уводить строку влево за экран,
чтобы без проблемно увелось, у .marga прописываем
overflow:hidden;

Да там код до безобразия простой.

И всё построено на идее очередй анимации, так что допилить можно легко.

пример с уходом влево

http://jsbin.com/ukazaf

Deff · #10 (**permalink**) 05.06.2012, 23:59

Сообщение от melky

пример с уходом влево

Это вправо... Чуть резковато (по скорости) а так

Форум

Справочник

Discord чат

Курсы javascript