Pause Jquery сценария при наведении курсора мыши

Я использую этот небольшой фрагмент кода для JQuery новостей тикер:Pause Jquery сценария при наведении курсора мыши

var speed = 5; 
var items, scroller = $('#scroller'); 
var width = 0; 

scroller.children().each(function(){ 
    width += $(this).outerWidth(true); 
}); 

scroller.css('width', width); 

scroll(); 

function scroll(){ 
    items = scroller.children(); 
    var scrollWidth = items.eq(0).outerWidth(); 
    scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100/speed, 'linear', changeFirst); 
} 

function changeFirst(){ 
    scroller.append(items.eq(0).remove()).css('left', 0); 
    scroll(); 
}

Я пытаюсь сделать паузу сценарий, когда Mouseover.

Использование функции stop(), оно работает, но оно теряет скорость каждый раз, когда я пропускаю мою мышь.

Я знаю, что они связаны с шириной/расстоянием/скоростью, но я не могу ее исправить.

Вот полный скрипт: http://codepen.io/anon/pen/wBayyz

Спасибо.

источник

2014-11-26 Spiro

Проверьте мой ответ для CSS только решения. –

$(document).ready(function(){ 
 
    
 
    var speed = 5; 
 
    var items, scroller = $('#scroller'); 
 
    var width = 0; 
 
    
 
    scroller.children().each(function(){ 
 
     width += $(this).outerWidth(true); 
 
    }); 
 
    
 
    scroller.css('width', width); 
 
    
 
    scroll(); 
 
    
 
    function scroll(){ 
 
     items = scroller.children(); 
 
     var scrollWidth = items.eq(0).outerWidth(); 
 
     scroller.animate({'left' : (items.eq(0).offset().left - 39) - scrollWidth}, scrollWidth * 100/speed, 'linear', changeFirst); 
 
    } 
 
    
 
    function changeFirst(){ 
 
     scroller.append(items.eq(0).remove()).css('left', 0); 
 
     scroll(); 
 
    } 
 
    $("#scroller").hover(function() { 
 
    $(this).stop(); 
 
}, function() {scroll();}); 
 
});

#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;} 
 

 
#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;} 
 

 
#scrollerWrapper{width: 500px; height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
<title>Horizontal scroller</title> 
 
</head> 
 
<body> 
 
    
 
<div id="scrollerWrapper"> 
 
    
 
    <ul id="scroller"> 
 

 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> 
 

 
    <li> Maecenas sollicitudin, ante id ultrices consectetur.</li> 
 

 
    <li>Cum sociis natoque penatibus et magnis dis parturient. </li> 
 

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

Проблема была, когда вы перезагрузки прокрутки вы должны принять во внимание, сколько было прокручивать уже, как я вы сделали здесь.

Это должно быть то, что вы ищете,

источник

2014-11-26 14:56:22 Shriike

Приятно, но немного прорывается, как прокрутка выполняется. – Spiro

Что значит, что прорывается прокрутка? Я тестировал его только в Chrome, но, похоже, он работал так, как я думал. – Shriike

Посмотрите на прокрутку несколько секунд. Он «прыгает». Я тоже использую Chrome. – Spiro

Вы можете попробовать использовать этот плагин: http://tobia.github.io/Pause/

источник

2014-11-26 14:53:44

Вы действительно не нужен JavaScript. Большинство современных браузеров поддерживают только анимацию CSS, для той задачи, которая у вас есть в руках.

#scroller { 
 
    display: inline-block; 
 
    margin:0; 
 
    padding:0; 
 
    line-height:30px; 
 
    -webkit-animation: roll 10s infinite linear; 
 
    -moz-animation: roll 10s infinite linear; 
 
    -o-animation: roll 10s infinite linear; 
 
    animation: roll 10s infinite linear; 
 
} 
 

 
#scroller:hover { 
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
@-webkit-keyframes roll { 
 
\t from { -webkit-transform: translateX(100%); } 
 
\t to { -webkit-transform: translateX(-100%); } 
 
} 
 

 
@-moz-keyframes roll { 
 
\t from { -moz-transform: translateX(100%); } 
 
\t to { -moz-transform: translateX(-100%); } 
 
} 
 

 
@-o-keyframes roll { 
 
\t from { -o-transform: translateX(100%); } 
 
\t to { -o-transform: translateX(-100%); } 
 
} 
 

 
@keyframes roll { 
 
\t from { transform: translateX(100%); } 
 
\t to { transform: translateX(-100%); } 
 
} 
 

 

 
#scroller li { 
 
    display: inline-block; 
 
    height:30px; 
 
    padding:0 0 0 10px; 
 
    list-style-position:inside; 
 
} 
 

 
#scrollerWrapper { 
 
    display: inline-block; 
 
    width: 500px; 
 
    height:30px; 
 
    margin:30px; 
 
    overflow:hidden; 
 
    border:1px #333 solid; 
 
    background:#F2F2F2; 
 
    white-space: nowrap; 
 
}

<html> 
 
<head> 
 
<title>Horizontal scroller</title> 
 
</head> 
 
<body> 
 
    
 
<div id="scrollerWrapper"> 
 
    
 
    <ul id="scroller"> 
 

 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> 
 

 
    <li> Maecenas sollicitudin, ante id ultrices consectetur.</li> 
 

 
    <li>Cum sociis natoque penatibus et magnis dis parturient. </li> 
 

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

источник

2014-11-26 15:13:04

Хорошее решение тоже. Но мне нужна поддержка старого браузера. Я сохраняю этот код для проектов futur, спасибо! – Spiro

Pause Jquery сценария при наведении курсора мыши

ответ

Смежные вопросы