CSS/JQuery支持悬停滚动文本

Question

我在我运行的网站上有一个推文源。但是，它会在小屏幕上被切断。我有一根足够高的酒吧，供1行文字使用，其中有最新的推文。如果推文太长，我希望推文可以省略或淡出。但悬停时，我希望文字慢慢地向左滑动，从而暴露出隐藏的部分。

当您突出显示标题宽于屏幕的歌曲时，iPod classic会使用此效果。 （我希望你明白我要去做什么。）

我只是好奇我将如何去实现这样的事情？我如何强制文本留在一行？

Answer 1

这是一个相当简单的方法来做到这一点移动滚动条。首先，建立了包含您的长文一个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/

Answer 2

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

Answer 3

有迹象表明，这样做的几个插件那里（雷米夏普：http://remysharp.com/demo/marquee.html为例），但如果你是从头开始构建：

该项目被滚动需要有“白色空间：NOWRAP;” （保持一行），“位置：绝对”（允许它向左和向右滚动），并包裹在一个具有“溢出：隐藏”的相对定位的元素中（使其看起来像只有你想要的宽度显示） 。

使用jQuery，您可以使用.animate（）从左至右在悬停事件

Answer 4

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

酷的东西：

1. 图书馆不可知
2. 用途，而不是绝对定位scrollLeft，所以它的更顺畅并且更快
3. 使用text-overflow:ellipsis而不是添加任何DOM元素

Answer 5

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

声明：我做到了。

Answer 6

我的解决方案在jsfiddle或这里最后，它使用CSS3动画。我借鉴了here和here的想法。我的想法是让容器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>