CSS/JQuery alimentato lateralmente testo scorrevole al passaggio del mouse

Question

Ho un feed twitter su un sito Web che gestisco. Tuttavia, viene tagliato su schermi piccoli. Ho un bar abbastanza alto per 1 riga di testo in cui ho l'ultimo tweet. Voglio che il tweet ellissi o svanisca alla fine se è troppo lungo. Ma al passaggio del mouse, voglio che il testo scorra lentamente verso sinistra, esponendo così la parte nascosta.

Questo effetto viene utilizzato su iPod classic quando si evidenzia una canzone con un titolo più largo dello schermo. (Spero tu capisca quello che sto cercando.)

Sono curioso di sapere come implementare qualcosa di simile? Come posso forzare il testo a rimanere su una riga?

Answer 1

Ecco un modo abbastanza semplice per farlo. In primo luogo, impostare un div contenente il lungo testo:

<div id="container"> 
Here is the long content, long long content. So long. Too long. 
</div> 

È possibile utilizzare alcuni CSS per gestire automaticamente il troncamento e puntini di sospensione:

div#container { 
    /* among other settings: see fiddle */ 
    width: 200px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

Se quindi determinare la larghezza originaria untruncated del contenuto , è possibile utilizzare jQuery .animate() per spostare quel contenuto a una velocità costante, anche se non si conosce la lunghezza del testo fino al runtime (come sarebbe il caso con un feed di Twitter). Ecco un modo un po 'meccanica di ottenere la misura:

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

Infine, alcune animazioni:

$('#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" 
}); 

A prescindere dalla lunghezza del testo, si otterrà una velocità costante di circa un secondo per 100 pixel (regolare come desiderato). La reimpostazione o il riavvolgimento del contenuto su mouseleave viene lasciato come esercizio. Questo approccio ha alcuni elementi ingenui, ma potrebbe darti qualche idea.

Ecco un esempio di lavoro: http://jsfiddle.net/redler/zdvyj/

Answer 2

Steffen Rusitschka ha scritto uno script jQuery, RUZEE.Ellipsis, per farlo.

Answer 3

ci sono alcuni plugin là fuori che fanno questo (Remy Sharp: http://remysharp.com/demo/marquee.html per esempio), ma se si stavano costruendo da zero:

La voce da scorrere necessità di avere "white-space: nowrap;" (per mantenerlo su una riga), "position: absolute" (per consentire lo scorrimento a sinistra e a destra) e avvolto in un elemento relativamente posizionato che ha "overflow: hidden" (per far apparire solo la larghezza che vuoi mostrare) .

utilizzando jQuery, è possibile utilizzare .animate() per spostare l'elemento di scorrimento da sinistra a destra per l'evento hover

Answer 4

Finalmente, ecco il mio ingresso: http://jsfiddle.net/sdleihssirhc/AYYQe/3/

Cool stuff:

1. Biblioteca agnostico
2. Usi scrollLeft invece di posizionamento assoluto, quindi è più liscia e più veloce
3. Utilizza text-overflow:ellipsis invece di aggiungere elementi DOM

Answer 5

si può dare uno sguardo a jRollingNews
Utilizzare il generatore di codice per personalizzare le barre e per vedere in anteprima il risultato.

Disclaimer: Ce l'ho fatta.

Answer 6

La mia soluzione su jsfiddle o qui alla fine utilizza le animazioni CSS3. Ho preso in prestito idee da here e here. La mia idea era di lasciare il contenitore div, cioè div.s a crescere sufficientemente ampia in modo che possa contenere tutto il testo, consentendo in tal modo l'uso di percentuali per la proprietà left nella regola @keyframes, da qui il:

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

Ecco il codice:

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