flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

<marquee>タグの代わりをつとめるSCRIPT

HTML5で廃止されたマーキータグの担い手

はてなblogは仕様の通りHTML5に対応した仕組みとなっている。

そのため以前ダイアリーでは使用可能だった<marquee>タグは使用不可となる。

ダイアリーでHTMLに興味をもった方も多いと思います。そしてダイアリーで<marquee>タグを

利用した人も多いと思います。

今回はJavaScriptを使った裏ワザで、その難点を克服しようと思います。

ただ<marquee>タグの方が使い手が良かっただけに、ただ文字を動かすだけでは

物足りないと思いましたので、JavaScriptだからこそできる<marquee>タグにはない

テクニックを紹介していこうと思います。

 

ソース概要

Sample

<script type="text/JavaScript">

moveString = "                         ";
moveString2 = "ここにスクロールしたい文字";
moveString3 = " ";
moveString += moveString2; //文字の連結
moveString += moveString3; //文字の連結

moveStringSpare = moveString; //スペアを作り復帰させる

function stringmove(){

moveString = moveString.substring(1,moveString.length);//文字を左から1文字切り取る
document.getElementById("StringTest").innerHTML = moveString;//出力

if(moveString.length == 1){ moveString = moveStringSpare }//もし長さがなければ再度スペアから復帰

setTimeout("stringmove()",100);//0.1秒ごとに処理


}

</script>

<input type="button" onClick="stringmove()" value="マーキー">
<div id="StringTest"> </div>

 

Sampleでは、inputタグによる制御でしたが本来ならbodyタグに置く感じとなります

それでも置けないんで、演出をどのようにするかは考えてみてください。

こつがいくつかありますので、それも紹介します。

速さを変える

速さを変えるのは簡単です。上記のソースのうち

 setTimeout("stringmove()",100);//0.1秒ごとに処理する

赤で示した所の数字を変更します。

基準は「1秒 = 1000」となっておりますので

値を小さくすればするほど速くなり、値が大きければ大きいほど遅くなります。

目安として「1000~50」が良いと思います。それ以外は極端になりますので。

文字を装飾する

文字を装飾するにはCSSで定義するのが良いです。

このdivタグのidはStringTestですから

 div#StringTest{
color: #F00;
font-weight: bold;
border: 1px solid #DDD;
background-color: #000;
}

なんて登録して<marquee>代わりしてやると

 

 

こんな感じにできちゃいます。

もちろん、JavaScriptですので点滅させることも可能です。4の倍数の文字列の時だけ

文字を消すという方法で実践します。

このようにJavaScriptでは<marquee>だけではできないパフォーマンスをする事ができます。