CSS / JQuery动态横向滚动文本悬停 [英] CSS/JQuery powered sideways scrolling text on hover

问题描述

我在我运行的网站上有一个Twitter Feed。但是，它在小屏幕上被切断。我有一个高度足够高的一行文本，我有最新的tweet。我想要推文，如果太长，椭圆或淡出在结束。但是在悬停时，我希望文本向左缓慢滑动，从而暴露隐藏的部分。

I have a twitter feed on a website I run. However, it gets cut off on small screens. I have a bar tall enough for 1 line of text in which I have the latest tweet. I want the tweet to ellipsize or fade out at the end if it is too long. But on hover, I want the text to slide slowly to the left, thus exposing the hidden part.

此效果在iPod经典时使用，具有比屏幕宽的标题。 （我希望你明白我要去的地方。）

This effect is used on the iPod classic when you highlight a song that has a title that is wider than the screen. (I hope you understand what I'm going for.)

我只是想知道如何实现这样的东西？如何强制文本保持在一行？

I'm just curious how I would go about implementing something like this? How can I force the text to stay on one line?

推荐答案

这是一个相当简单的方法。首先，设置一个包含长文本的div：

Here's a fairly simple way to do it. First, set up a div containing your long text:

<div id="container">
Here is the long content, long long content. So long. Too long.
</div>

您可以使用一些CSS自动处理截断和省略号：

You can use some css to automatically handle the truncation and ellipsis:

div#container {
    /* among other settings: see fiddle */
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

如果然后确定内容的原始未截断宽度， jQuery的 .animate（）以一致的速度移动内容 - 即使你不知道文本的长度，直到运行时（如twitter feed）。这是一个有点机械的方式得到的测量：

If you then determine the native, untruncated width of the content, you can use jQuery's .animate() to move that content at a consistent speed -- even if you don't know the length of the text until runtime (as would be the case with a twitter feed). Here's a somewhat mechanical way of getting the measurement:

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"
});

无论文字的长度如何，您将获得一致的速度像素（根据需要调整）。重置或倒回鼠标左键的内容留作练习。

Regardless of the length of the text, you'll get a consistent speed of about one second per 100 pixels (adjust as desired). Resetting or rewinding content on mouseleave is left as an exercise. This approach has some naïve bits, but may give you some ideas.

这里有一个工作示例： http://jsfiddle.net/redler/zdvyj/

Here's a working example: http://jsfiddle.net/redler/zdvyj/

这篇关于CSS / JQuery动态横向滚动文本悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！