Бегущая строка на js. Остановка при наведении.
День добрый! Такая задача:
Бегущая строка снизу вверх, очередная прокручиваемая строка приостанавливается на неск. секунд, при наведении блок останавливается пока не уберут курсор. Прокрутка циклична. Проблема: если навести на одну строку, потом сразу на другую, код не успевает это обработать и всё сбивается - блок со строками, не реагируя на курсор, уезжает вверх. Исходный код: <div id="anim" style="position: relative; height: 25px; background-color: aqua; line-height: 25px;" onmouseover="window.isStart = false" onmouseout="window.isStart = true; animateNews(number);">
<div id="anim2" style="position: absolute; margin-top: 25px;">
<a href="#">1111111</a><br />
<a href="#">2222222</a><br />
<a href="#">3333333</a>
</div>
</div>
isStart = true;
number = 0;
function animateNews(i){
number = i; // какая строка по счету крутится
if(isStart == true){
len = jQuery('#anim').height(); // вычисляет, на какой интервал поднимать строку, чтобы в нужный момент сделать ее остановку на пару сек
a1 = jQuery('#anim2').height();
bottom = parseInt("-" + a1);
size = a1 / len;
a2 = parseInt(jQuery('#anim2').css('bottom'));
jQuery('#exam').html(bottom);
if((i <= size) && (a2 < len)){
jQuery("#anim2").animate({"bottom": "+="+len+"px"}, 1000);
if(i<size)
setTimeout("animateNews("+(i+1)+")", 2000);
else
setTimeout("animateNews("+(i+1)+")", 1010);
}else{ // условие для последней строки, чтобы перевести блок на исходное положение и начать сначала
jQuery("#anim2").css({'bottom': bottom});
i=0;
setTimeout("animateNews("+(i)+")", 0);
}
}else{
return;
//setTimeout("animateNews("+(i)+")", 500);
}
}
animateNews(0);
Может можно остановить блок другими путями (приостановить функцию), либо еще что дописать? Направьте, плиз:) |
Nina_2012,
Где-то был похожий пример от melky в июне |
К сожалению, там нет ничего по остановке текста наведением курсора
|
<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;
overflow: hidden;
}
.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 Myanim(){
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(),
widthness = marga.width(),
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(), left: 0}).
animate({ top: 0 }, bubble_time, bubble_easing).
delay(stay_time).
animate({left:-widthness}, fadeOut_time).
queue(loop);
i += 1;
if (next) {
next();
}
})();
$(".marga > div").mouseover(function(){
$(this).stop(true);
}).mouseout(function(){
//Tут чот запустить с данной позиции
});
});
</script>
<script type="text/javascript">
</script>
</body>
</html>
Как запустить спрашивайте у melky |
Спасибо за ответы! Появилась другая идея, пока их смотрела:) Вроде работает идеально)) Может кому пригодится:
<div id="anim" style="height: 25px; line-height: 25px;" onmouseover="window.run = false" onmouseout="window.run = true;">
<div id="anim2" style="position: absolute;">
<a href="#">1111111</a><br />
<a href="#">2222222</a><br />
<a href="#">3333333</a>
</div>
</div>
<script>
run = true;
lenSmall = jQuery('#anim').height();
lenBig = jQuery('#anim2').height();
jQuery("#anim2").css({'bottom':'-'+(lenBig-2)+'px'});
function animateNews(){
if(run){
lenNow = parseInt(jQuery('#anim2').css('bottom'));
if(lenNow > lenSmall){
jQuery("#anim2").css({'bottom':'-'+(lenBig-2)+'px'});
}else{ // возвращаем блок вниз и цикл заново
jQuery("#anim2").animate({"bottom": "+=1px"}, 10);
}
// если прошли на высоту строки и это была не последняя строка, то делаем паузу
if((lenNow % lenSmall) == 0 && lenNow < lenSmall){
setTimeout("animateNews()", 1000);
}else{
setTimeout("animateNews()", 70);
}
}else{
setTimeout("animateNews()", 70);
}
}
animateNews();
</script>
|
Воспользуйтесь плагином на jquery
http://masscode.ru/index.php/k2/item/44-limarquee В нем есть все что вам нужно и даже больше |
| Часовой пояс GMT +3, время: 09:32. |