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>