1. casa
  2. Domanda e risposta
  3. Spostamento circolare del testo sulla pagina Web

Spostamento circolare del testo sulla pagina Web

2012-10-30 18 views
7

Sto progettando una pagina Web in cui è necessario spostare il testo dal lato sinistro dello schermo del monitor alla parte destra dello schermo. Ho provato con il tag <marquee>. Funziona senza errori.Spostamento circolare del testo sulla pagina Web

La mia esigenza è ogni volta che il testo è in procinto di scomparire lato interno destro della pagina web dovrebbe iniziare che esce dal lato sinistro della pagina. Non dovrebbe aspettare che tutto il testo scompaia e quindi iniziare dal lato sinistro.

Fino ad ora lo sto usando solo <html>. Si prega di suggerire anche altri modi.

fonte

2012-10-30 Prathamesh

+0

@Whoever ha votato per essere vicino. Potresti spiegare perché pensi che non sia una vera domanda, quindi l'OP può migliorarla. –

+0

Non so chi lo abbia chiuso ma '' è un tag non standard. È deprecato dal W3C e non consigliato da questi per l'uso in qualsiasi documento HTML. – Andy

+2

possibile duplicato di [Marquee Javascript per sostituire i tag ] (http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags) – Alohci

risposta

3

E 'possibile utilizzando Javascript:

hanno due copie del testo da scorrere separati dalla larghezza del contenitore. Animare da (copia sinistra visibile) a (copia destra visibile), quindi saltare indietro e ripetere.

Qualcosa sulla falsariga di (non testato, utilizzando jQuery):

<div class="outer"> 
    <div class="inner"> 
    some text 
    </div> 
</div>

css:

.outer, .inner { 
    width: 100%; 
} 
.outer { 
    position: relative; 
    overflow: hidden; 
} 
.inner { 
    position: absolute; 
}

js:

(function rerun(){ 
    var time = 10000 //ms 

    $(".inner").slice(0,-1).remove() 
    $i1=$(".inner") 
    $i2=$i1.clone() 

    $i1.css({left:0}).animate({left:"-100%"}, time) 
    $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun) 
})()

In questo modo il testo dovrebbe iniziare che appaiono sul lato destro non appena inizia a scomparire sul lato destro. Modifica le larghezze relative per ottenere un effetto diverso.

fonte

2012-10-30 15:36:13

+0

questa cosa sta volando via troppo velocemente, e la barra di scorrimento per la pagina è costantemente impazzita usando anche =/ – Maslow

+0

@La barra di scorrimento di Mowslow è stata riparata con 'overflow: hidden'; ammettiamolo, anche il tempo di scorrimento predefinito di 600 millisecondi era un po 'troppo breve. Grazie per averlo notato –

Problemi correlati

 Problemi correlati