Отказ от ответственности: я сделал это.

я есть твиттер на моем веб-сайте. Однако на маленьких экранах его обрезают. У меня есть достаточно высокий бар для 1 строки текста, в котором у меня есть последний твит. Я хочу, чтобы твит эллипсировал или исчезал в конце, если он слишком длинный. Но при наведении курсора я хочу, чтобы текст медленно сдвигался влево, обнажая скрытую часть.

Этот эффект используется на iPod classic, когда вы выделяете песню, заголовок которой шире экрана. (Надеюсь, вы понимаете, для чего я иду.)

Мне просто интересно, как бы я реализовал что-то подобное? Как заставить текст остаться на одной строке?

Ответы на вопрос(6)

http://jsfiddle.net/sdleihssirhc/AYYQe/3/

Крутая вещь:

Библиотечный агностикИспользует scrollLeft вместо абсолютного позиционирования, поэтому он плавнее и быстрееПользыtext-overflow:ellipsis вместо добавления любых элементов DOM
 Purefan07 июл. 2011 г., 09:45
очень аккуратный пример! и без jquery!
 NewCod3r19 янв. 2017 г., 10:29
@sdleihssirhc: Ваша демонстрационная ссылка не работает.
 BeesonBison14 нояб. 2013 г., 12:08
Это очень круто :) Спасибо, что поделились!

http://remysharp.com/demo/marquee.html например), но если вы строили с нуля:

У прокручиваемого элемента должно быть «white-space: nowrap»; (чтобы держать его на одной строке), «position: absolute» (чтобы прокрутить его влево и вправо) и обернуть в относительно позиционированный элемент, который имеет «overflow: hidden» (чтобы он выглядел так, как показывает только желаемая ширина) ,

Используя jQuery, вы можете использовать .animate () для перемещения элемента прокрутки слева направо на событие наведения мыши

Решение Вопроса

содержащий ваш длинный текст:

<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's.animate() перемещать этот контент с постоянной скоростью - даже если вы не знаете длину текста до времени выполнения (как в случае с фидом Twitter). Вот несколько механический способ получить измерение:

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/

 Purefan07 июл. 2011 г., 09:42
спасибо за скрипку :) и отличные пояснительные комментарии

Мое решение наjsfiddle или здесь, в конце, он использует анимацию CSS3. Я позаимствовал идеи уВот а такжеВот, Моя идея состояла в том, чтобы позволить контейнеруdivт.е.div.s расти достаточно широко, чтобы он мог содержать весь текст, что позволяет использовать проценты дляleft недвижимость в@keyframes Правило, следовательно:

.s {
   display: inline-block;
}
.t:hover, .s:hover {
  width: auto;
}

Вот код:

.t {
    white-space: nowrap;
    position: relative;
    overflow: hidden;   
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}
.s {
  display: inline-block;
  width: 100%;
}
.t:hover, .s:hover {
  width: auto;
}
.s:hover .t { 
  animation: scroll 15s;
}
.f {
  width: 100px;
  background: red;
  overflow: hidden;
}
@keyframes scroll {
    0% {left: 0px;}
    100% {left: -100%;}                   
}
<div class="f">
  <div class="s">
    <div class="t">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit accusamus nulla facilis unde sed ipsum maiores adipisci, eius excepturi saepe perspiciatis sequi optio ipsam odio quibusdam quo libero repudiandae.
    </div>
  </div>
</div>

RUZEE.Ellipsisдля этого.

jRollingNews
Используйте генератор кода для настройки баров и предварительного просмотра результата.

Отказ от ответственности: я сделал это.

Ваш ответ на вопрос