Javascriptを使い映画のエンディングのスタッフロールのように、
文字が下から上へ流れていくものを作りたいです。
Googleで検索してみたのですが、以下の条件に合うものが見つからなかったので、
もし以下の条件に合うjavascriptをご存知の方は教えてください。
・ページを読み込んだ時点から自動でスクロールを開始し、
下から上へのスクロールを永久に繰り返す。
・スクロールするテキストの色を変えたりできるようにしたいので
テキストエリアは使わない。
(http://allabout.co.jp/computer/hpcreate/closeup/ …
において解説されているようなボックスを使いたいです。
もし無理ならテキストが流れる範囲を指定(CSS等で)できればそれでいいです。)
・スクロールの早さ等を調節できる。
・HTML の MARQUEE タグは使わない。
よろしくお願いします。
No.4ベストアンサー
- 回答日時:
>個別にCSS
classをつかってstyleで指定すればよろしいかと
赤や白のつけかたに法則性があればプログラムで
処理もできそうですが、一応今回は各行にclassを
交互につけておきました。これは任意に変更して
ください。
>これを<br />に変えたほうが良い
innerHTMLから<br />を見ると「<BR>」として
認識されるようです。なので下3行は「<br>」の
ままで大丈夫です。わざわざtoLowerCase()を
しているのはそういうわけです。
それを踏まえるとこんな感じでしょうか?
<style type="text/css">
span.aka{color:#ff0000;}
span.shiro{color:#ffffff;}
table{background-color:#000000;}
</style>
<table width=600>
<tr><td>
<span id="view">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</span>
</td>
</tr>
</table>
<hr>
<form>
<input type="button" onClick="clearInterval(timeid)" value="STOP">
<input type="button" onClick="clearInterval(timeid);timeid=setInterval('stuffroll()',1000)" value="START">
</form>
<script language=javascript>
text=Array("<span class='aka'>1行目</span>",
"<span class='shiro'>2行目</span>",
"<span class='aka'>3行目</span>",
"<span class='shiro'>4行目</span>",
"<span class='aka'>5行目</span>",
"<span class='shiro'>6行目</span>",
"<span class='aka'>7行目</span>",
"<span class='shiro'>8行目</span>",
"<span class='aka'>9行目</span>",
"<span class='shiro'>10行目</span>");
var count=0;
var viewarea=document.getElementById('view').innerHTML;
function stuffroll(){
if(count==text.length) count=0;
viewarea +=text[count]+"<br>";
var tmp = viewarea.toLowerCase().split("<br>")
tmp.shift();
viewarea=tmp.join("<br>");
document.getElementById('view').innerHTML=viewarea ;
count++;
}
timeid=setInterval("stuffroll()",1000);
</script>
No.3
- 回答日時:
#2です。
はて?私が書いたのは全画面スクロールじゃない
ですが・・・ちょうどテーブルで囲むとわかりやすい
かもしれません。
こういうことではないのでしょうか?
<table border=1 width=600>
<tr><td>
<span id="view">
<br>
<br>
<br>
<br>
<br>
<br>
</span>
</td>
</tr>
</table><hr>test
<script language=javascript>
text=Array("1行目","2行目","3行目","4行目","5行目","6行目","7行目","8行目","9行目","10行目");
var count=0;
var viewarea=document.getElementById('view').innerHTML;
function stuffroll(){
if(count==text.length) count=0;
viewarea +=text[count]+"<br>";
var tmp = viewarea.toLowerCase().split("<br>")
tmp.shift();
viewarea=tmp.join("<br>");
document.getElementById('view').innerHTML=viewarea ;
count++;
}
timeid=setInterval("stuffroll()",500);
</script>
申し訳ありません。全画面スクロールというのは私の勘違いでした。
2つお聞きしたいことがあるのですが、「1行目は赤色、2行目は白色」というように個別にCSSを使って装飾をするにはどうすればよいのでしょうか?
それと、書き忘れていたことなのですが教えていただいたJavascriptはブログで使うつもりなのですがそのブログは、XHTMLで書かないといけないので<br>は<br />と書かないといけません。
下のほうに3つ<br>が書いてありますがこれを<br />に変えたほうが良いと思うのですがそうすると、Javascriptが正しく動作しません。どうすればよいでしょうか?
No.2
- 回答日時:
こんなんでどうでしょう?
スクロール範囲はspanの<br>の数だけ、
スピードはsetIntervalの引数(ミリ秒)で指定します。
<span id="view">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</span>
<hr>
<form>
<input type="button" onClick="clearInterval(timeid)" value="STOP">
<input type="button" onClick="clearInterval(timeid);timeid=setInterval('stuffroll()',100)" value="START">
</form>
<script language=javascript>
text=Array("1行目","2行目","3行目","4行目","5行目","6行目","7行目","8行目","9行目","10行目");
var count=0;
var viewarea=document.getElementById('view').innerHTML;
function stuffroll(){
if(count==text.length) count=0;
viewarea +=text[count]+"<br>";
var tmp = viewarea.toLowerCase().split("<br>")
tmp.shift();
viewarea=tmp.join("<br>");
document.getElementById('view').innerHTML=viewarea ;
count++;
}
timeid=setInterval("stuffroll()",100);
</script>
m035 さんの回答に対する私のお礼と同じことになり申し訳ありません。
私の説明不足で大変申し訳ないのですが、http://allabout.co.jp/computer/hpcreate/closeup/ …で解説されているようなボックスの中のテキストをスタッフロールのように下から上へスクロールさせることは可能でしょうか?
答えてもらったjavascriptですと、画面全体の下から上へスクロールされてしまいますので。
(最初に投稿したときには、上記のような説明を書き、私個人のサイトにスクロールさせたいボックスを載せたページをアップしリンクしておいたのですが、規約違反ということでその部分だけ削除されてしまいました。)
No.1
- 回答日時:
一応、作ってみましたが、
>・スクロールするテキストの色を変えたりできるようにしたいのでテキストエリアは使わない。
HTMLをそのまま書くことが出来ます。
>・スクロールの早さ等を調節できる。
閲覧者が変えることは出来ませんので、動的に変更したいときは言ってください。
また、ウィンドウサイズを取得していますので、本来はブラウザごとに動作を分けるべきなんでしょうがしていません。
気になる場合は参考URLをご覧あれ。
<html>
<head>
<title>staff</title>
<script type="text/javascript">
<!--
var step=1;//一回ごとの移動量(単位はピクセル)、増やせばよりはやく動きます
var interval=50;//移動させる時間の間隔(単位はミリ秒)、減らせばよりはやく動きます
//上記2つの変数でスピードを調節してください。ただし、stepを増やすか
//intervalを減らすと動きがガクガクしますので注意。
var y,s,timer=setTimeout("",0);
function set(){
if(window.innerHeight)s=window.innerHeight;
else if(document.body.clientHeight)s=document.body.clientHeight;
else s=screen.height;
y=s;
document.getElementById("staff").style.top=y;
loop();
}
function loop(){
clearTimeout(timer);
(y+document.getElementById("staff").offsetHeight)<0?y=s:y-=step;
document.getElementById("staff").style.top=y
timer=setTimeout("loop()",interval);
}
//-->
</script>
</head>
<body onload="set()" style="overflow:hidden">
<div id="staff" style="position:absolute;top:2000px;left:0px">
ここに内容を入れてください。<br>
HTMLがそのまま記述できます。<br>
また、文字の最後が画面の外に消えた瞬間に、<br>
下から繰り返されますので、<br>
一回ずつの間隔がほしいときは<br>
brタグなどでスタッフロールの最下部に、<br>
空白を作ってください。<br>
適当に作りましたので動作確認は<br>
IE6とFirefox1.5でしかしていません。
</div>
</body>
</html>
参考URL:http://www.sasaraan.net/program/js/jswndstate.html
私の説明不足で大変申し訳ないのですが、http://allabout.co.jp/computer/hpcreate/closeup/ …で解説されているようなボックスの中のテキストをスタッフロールのように下から上へスクロールさせることは可能でしょうか?
答えてもらったjavascriptですと、画面全体の下から上へスクロールされてしまいますので。
(最初に投稿したときには、上記のような説明を書き、私個人のサイトにスクロールさせたいボックスを載せたページをアップしリンクしておいたのですが、規約違反ということでその部分だけ削除されてしまいました。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- iPad ipadでダウンロードした文をスクリーンに投影させること 2 2023/04/05 10:26
- Excel(エクセル) エクセル 条件に合う日付に入力された時間数の合計したい 4 2022/06/17 22:18
- Excel(エクセル) VBA 特定の列に入っているテキストをコピペ 2 2023/06/14 11:24
- その他(プログラミング・Web制作) マウスオーバー→ホイール回転でスクロールできない 2 2022/10/31 10:06
- Android(アンドロイド) スクロール 2 2023/01/05 10:26
- Chrome(クローム) HPの様子が変わった 2 2022/03/25 05:37
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- マウス・キーボード Macのスクロールについて 2 2022/06/28 11:29
- Visual Basic(VBA) エクセルのマクロについて教えてください。 2 2023/07/21 09:42
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「オブジェクトを指定してくだ...
-
JavaScriptでのEnterキーとAlt+...
-
SCRIPT5007: 未定義または NULL...
-
ボタンのID名を取得するには?
-
function の return 値を表示し...
-
ハイライト表示(タグの中を除...
-
return falseが効かない(F5キ...
-
このようなテキストの抽出は・...
-
JavaScriptでの西暦下2桁での表...
-
一定時間ごとに背景画像の切り...
-
金額の3桁区切り
-
リンクをクリックしてページの...
-
Webサイトを表示時にタイトルの...
-
IE6でDOMを使用した内容が表示...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
スマホ上で、左右スワイプで次...
-
【Google Apps Script】「ライ...
-
javascriptファイルは1つに統...
-
bodyにidをつける理由は何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
function の return 値を表示し...
-
getElementsByNameで要素が取得...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptでiframeの内容を「...
-
フォーカス移動抑止について
-
キーを押している間の時間を計...
-
JavaScript でキーを送る
-
bodyタグのfocus
-
ボタンのID名を取得するには?
-
JavaScriptでのEnterキーとAlt+...
-
リンク移動先のURLを取得
-
初心者javascript ウィンドウサ...
-
自動ジャンプでフォームデータ...
-
乱数を一定時間毎に表示させた...
-
jQuery ツールチップの中のリンク
-
idHOGEで取得したinnerText(数...
-
フレームサイズの変更について
-
AjaxでDBから取得したデータを...
-
JavaScriptでの西暦下2桁での表...
-
ページ全体を検索して特定文字...
おすすめ情報