2010/04/11

Java Scriptでマーキータグもどきを作成

Java Scriptをつかって久しぶりにマーキータグもどきスクリプトを作り直した。

もどきといっているが、仕様は全く異なる。「文字をスクロールするスクリプト」を作ったといった方がいいかもしれない。

今回は等加速度直線運動を忠実に(?)再現して現実的な挙動にした。

摩擦は無視できるものとします(・・・。)

加速度は右向きを正として-200(px/sec2)に設定。

動くのは黄色い文字の部分。

右側から登場、(√200000 px/sec)例の加速度で減速し、ちょうど左端で停止。

その後3秒ほどしたらば例の加速度で加速、左側に消えていく。あまり長いと消えきらないかも。

流れる内容は配列に入れておき、innerHTMLで順番に書き換える。

動作はこれを見て下さい。

○Webkit系ブラウザの方はこちら  例:Chrome, Safari 
○Mozilla系 他 のブラウザの人はこちら  例:Firefox, Opera, IE
※推奨環境 Google Chrome
※動作確認 Chrome, Safari, Opera, Firefox, IE(いずれも最新版)
※IEは停止位置に不具合があります。


あと、html,Java Scriptファイルですが、無断転用なさらないようお願いします。参考にするのは結構です。
<公開終了いたしました>

Firefoxで速度が遅いのは改善の余地あり

--追記

どんな感じで処理しているかを紹介すると、
まず、外枠となるdivに、CSSでwidth,overflow:autoを設定
そしてその中に動かす内容をつっこんだdivを作り、position:relativeにする

あとはJava Scriptで位置を変えるようにすればいい。

0 件のコメント:

コメントを投稿