2012-10-30 7 views
7

私は、テキストをモニタ画面の左側から画面の右側に移動する必要があるウェブページを設計しています。私は<marquee>タグで試してみました。何のエラーもなく動作しています。ウェブページ上で循環的にテキストを移動する

ウェブページの右側にテキストが表示されなくなると、ページの左側からテキストが表示されます。すべてのテキストが消えるのを待ってから、左から開始してはいけません。

これまでは<html>を使用しています。他の方法も提案してください。

+0

@誰でも投票に近いと投票しました。 OPがそれを改善できるように、それが本当の問題ではないと思う理由を説明することができますか? –

+0

誰がそれを閉じたのかわかりませんが、 ''は非標準のタグです。 W3Cでは推奨されておらず、HTML文書での使用については知らされていません。 – Andy

+2

タグを置き換える[Javascriptの文字盤]の複製が可能です(http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags) – Alohci

答えて

3

それはJavascriptを使用して可能である:

は、コンテナの幅で区切ってスクロールされているテキストの2つのコピーを持っています。アニメーション(左のコピーを表示)から(右のコピーを表示)にアニメーションし、次にジャンプして繰り返します。

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

この方法右側に消え始めるとすぐに右側に表示されます。相対的な幅を変更して、異なる効果を達成します。

+0

このことは速すぎます。ページのスクロールバーは常にそれを使って狂っています。/ – Maslow

+0

@Maslowスクロールバーは 'overflow:hidden'で固定されています。おそらく、600ミリ秒のデフォルトのスクロール時間は少し短すぎた。気づいてくれてありがとう –

関連する問題