Вот довольно простой способ сделать это. Сначала настройте div, содержащий ваш длинный текст:
<div id="container">
Here is the long content, long long content. So long. Too long.
</div>
Вы можете использовать некоторые CSS для автоматической обработки усечения и многоточия:
div#container {
/* among other settings: see fiddle */
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Если вы затем определите собственную, не усеченную ширину контента, вы можете использовать jQuery .animate() для перемещения этого контента с постоянной скоростью - даже если вы не знаете длину текста до времени выполнения (как быть в случае с твиттером). Вот несколько механический способ получить измерение:
var true_width = ( function(){
var $tempobj = $('#container') // starting with truncated text div container
.clone().contents() // duplicate the text
.wrap('<div id="content"/>') // wrap it in a container
.parent().appendTo('body') // add this to the dom
.css('left','-1000px'); // but put it far off-screen
var result = $tempobj.width(); // measure it
$tempobj.remove(); // clean up
return result;
})();
Наконец, немного анимации:
$('#container').one('mouseenter', function(){ // perhaps trigger once only
var shift_distance = true_width - $(this).width(); // how far to move
var time_normalized = parseInt(shift_distance / 100, 10) * 1000; // speed
$(this).contents().wrap('<div id="content">').parent() // wrap in div
.animate({
left: -shift_distance,
right: 0
}, time_normalized, 'linear'); // and move the div within its "viewport"
});
Независимо от длины текста, вы получите постоянную скорость около одной секунды на 100 пикселей (отрегулируйте по желанию). Сброс или перемотка содержимого при отпускании мышью оставлено в качестве упражнения. Этот подход имеет несколько наивных моментов, но может дать вам некоторые идеи.
Вот рабочий пример: http://jsfiddle.net/redler/zdvyj/