当前位置：文江博客话题详情

CSS/JQuery 支持悬停时横向滚动文本

发布于 2024-10-13 19:43:12 字数 228 浏览 1 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

も让我眼熟你 2024-10-20 19:43:12

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

很酷的东西：

图书馆不可知
使用scrollLeft而不是绝对定位，因此更流畅、更快
使用text-overflow:ellipsis而不是添加任何DOM元素

回复收藏 0 原文

ζ澈沫 2024-10-20 19:43:12

这是一个相当简单的方法。首先，设置一个包含长文本的 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 feed 的情况一样）。下面是一种获取测量结果的机械方法：

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/

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>

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

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

Finally, some animation:

$('#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.

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

回复收藏 0 原文

北风几吹夏 2024-10-20 19:43:12

我在 jsfiddle 或最后的解决方案，它使用 CSS3 动画。我借用了此处和这里。我的想法是让容器 div（即 div.s）增长到足够宽，以便它可以包含所有文本，从而可以使用百分比来表示 @keyframes 规则中的 >left 属性，因此：

.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>

My solution on jsfiddle or here at the end, it uses CSS3 Animations. I borrowed ideas from here and here. My idea was to let the container div, i.e. div.s to grow wide enough so that it can contain all the text, thus enabling the use of percentages for the left property in the @keyframes rule, hence the:

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

Here is the code:

.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>

回复收藏 0 原文