CSS / JQuery在悬停时侧翻滚动文字

我在我运行的网站上有一个twitter Feed.然而,它在小屏幕上被切断.我有一个足够高的一个酒吧,用于1行文本,其中有最新的推文.如果太短,我希望tweet可以省略或淡出.但是在悬停的时候,我希望文本向左滑动,从而露出隐藏的部分.

当您突出显示具有比屏幕宽的标题的歌曲时,此效果将用于iPod classic. (我希望你明白我要去做什么.)

我只是好奇我会如何执行这样的事情？如何强制文字停留在一行？

解决方法

这是一个相当简单的方法.首先,设置一个包含你的长文本的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像素约一秒的一致速度(根据需要进行调整).将鼠标悬停上的内容重置或倒带作为练习.这种方法有一些天真的一点,但可能会给你一些想法.

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

CSS / JQuery在悬停时侧翻滚动文字

解决方法

相关文章