9

我在我运行的网站上有一个 twitter 提要。但是，它在小屏幕上会被切断。我有一个足够高的栏，可以容纳 1 行我有最新推文的文本。如果推文太长，我希望推文在最后省略或淡出。但是在悬停时，我希望文本向左缓慢滑动，从而暴露隐藏的部分。

当您突出显示标题比屏幕宽的歌曲时，会在 iPod classic 上使用此效果。（我希望你明白我的目的。）

我只是好奇我将如何实施这样的事情？如何强制文本保持在一行？

4

6 回答 6

14

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

酷的东西：

  1. 图书馆不可知论者
  2. 使用scrollLeft代替绝对定位，所以更流畅更快
  3. 使用text-overflow:ellipsis而不是添加任何 DOM 元素
于 2011-01-21T06:58:41.657 回答
7

这是一个相当简单的方法。首先，设置一个包含长文本的 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 个像素约 1 秒的一致速度（根据需要进行调整）。在 mouseleave 上重置或倒带内容留作练习。这种方法有些幼稚，但可能会给你一些想法。

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

于 2011-01-21T06:28:14.087 回答
3

我在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>

于 2016-04-28T05:42:29.013 回答
2

有一些插件可以做到这一点（例如 Remy Sharp：http ://remysharp.com/demo/marquee.html ），但如果你是从头开始构建的：

被滚动的项目需要有“white-space: nowrap;” （保持在一行上），“position:absolute”（允许它左右滚动）并包裹在一个相对定位的元素中，该元素具有“overflow:hidden”（使它看起来像只显示你想要的宽度） .

使用 jQuery，您可以使用 .animate() 在悬停事件上从左到右移动滚动项

于 2011-01-21T05:57:50.490 回答
0

Steffen Rusitschka 为此编写了一个 jQuery 脚本RUZEE.Ellipsis。

于 2011-01-21T05:33:10.043 回答
0

您可以看一下jRollingNews
使用代码生成器来自定义条形图并预览结果。

免责声明：我做到了。

于 2012-03-20T09:48:07.337 回答