CSS/JQuery在悬停时侧向滚动文本

Question

我在我运行的网站上有一个Twitter提要.但是,它会在小屏幕上被切断.我有一个足够高的栏,可以在1行文字中找到最新的推文.如果太长,我希望推文在最后进行椭圆化或淡出.但是在悬停时,我希望文本慢慢向左滑动,从而暴露出隐藏的部分.

当您突出显示标题宽于屏幕的歌曲时,此效果将用于iPod classic.(我希望你明白我的意思.)

我只是好奇我将如何实现这样的东西？如何强制文本保持在一行？

Answer 1

最后,这是我的条目:http://jsfiddle.net/sdleihssirhc/AYYQe/3/

酷的东西:

1. 图书馆不可知论者
2. 使用scrollLeft而不是绝对定位,因此它更平滑,更快速
3. 使用text-overflow:ellipsis而不是添加任何DOM元素

Answer 2

这是一个相当简单的方法.首先,设置一个包含长文本的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()以一致的速度移动该内容 - 即使您在运行时之前不知道文本的长度(就像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像素大约一秒的一致速度(根据需要进行调整).在mouseleave上重置或倒带内容留作练习.这种方法有一些天真的位,但可能会给你一些想法.

这是一个有效的例子:http://jsfiddle.net/redler/zdvyj/