| Deff | 05.06.2012 23:59 |
Цитата:
|
Сообщение от melky
пример с уходом влево
|
Это вправо... Чуть резковато (по скорости) а так 
Бегущая строка
Помогите пожалуйста
Как сделать так чтоб бегущая строка допустим: Сама строка - несколько предложений. Двигаются они с низу в верх,сначала одно предложение останавливается около края верхнего на не сколько секунд, а потом двигается дальше, затем второе предложение также и так по очереди до бесконечности Знаю как сделать чтобы строка двигалась с низу вверх и останавливалась путем HTML. не знаю только как сделать чтобы замерала она не несколько секунд и продолжала движение, делается это с помощью джаваскрипт помогите ( вот код HTMl <marquee height="100" width="300" bgcolor="#999" direction="up"> <div>предложение1</div> <div>предложение2</div> <div>предложение3</div> </marquee> нужно чтобы сначала предложение1 доходило до верхнего края и останавливалось на несколько секунд потом опять продолжалось движение и предложение2 доходило до края и останавливалось потом предложение3 а потом снова первое и так далее до бесконечности В гугле искал дельного ничего не нашел Я и в теме работа написал Честно говоря не думаю что это прям ну очень сложный код который можно покупать, поэтому представление о его стоимости вообще не имею |
http://javascript.ru/forum/dom-windo...oka-na-js.html
Вот почитайте и переделайте код под себя:) |
помоги разобраться пожалуйста
Вот код который сейчас у меня в 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> Что куда к чему пристраивать я так и не понял Мне бы это в первую очередь хоть узнать а дальше сам попробую перестроить под себя |
Цитата:
когда предложение1 замирает сверху, другие движутся вверх, или замирают с ним? после того, когда предложения дойдут до верха, что дальше - они опускаются вниз мгновенно, или анимированно? кроме того, есть ли запускаемый пример html, под который нужно писать скрипт? PS я вообще не думаю, что за него нужно платить. |
Если есть div - удобно чтобы текущее было единственным пока доходит до верха экрана(иль не наю - до левого края),
Ксать нужно выяснить направленность движения Как дошло - остановилось и после начала движения и некого отступа от конца первого, появляется следом второе --------- Как быть - если текст одной фразы - не вошел полностью в экран блока ? |
поподробнее.
когда предложение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 пусть так, просто знаю что это все и без него сделать можно |
Я сделал на Кувери, т.к. это было быстрее, чем на native. Надеюсь, Вы не против :).
Сам код скрипта и пример находятся ниже. Подготовка: О настройках эффектов :
Пример :
<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>
|
melky,
Симпотно, но, мне кажецо нужно усилить концовку для визуального эффекта, после остановки, стоит уводить строку влево за экран, чтобы без проблемно увелось, у .marga прописываем overflow:hidden; |
Цитата:
И всё построено на идее очередй анимации, так что допилить можно легко. пример с уходом влево http://jsbin.com/ukazaf |
Цитата:
Это вправо... Чуть резковато (по скорости) а так |
| Часовой пояс GMT +3, время: 06:10. |