2006年09月24日
電光掲示板（動く文字）_JavaSript中級
yozoは右サイドバーのBlogPet「うさも」の下に、背景をお借りしている作家のみなさんを<marquee>を使ってアナウンスするようにしています。詳しくはコチラ動く文字の設定♪
実はいつも愛用している(？)Another HTML-lint gatewayでチェックをすると、この<marquee>はXHTMLでは非推奨のタグなのでJavaScriptで動く文字を設定したほうがいいというようなメッセージが出ました。そこで早速、JavaScriptで動く文字を設定してみました。
<marquee>では、ブログ名と作家名にリンクを設定できていましたが、今回のJavaScriptでは、リンクは設定できませんでした。悪しからずご了承ください。m(_ _)m下のコードは、そのまま使用してくださっても、構いませんが、ご使用される場合は必ず、URLを記入してこの記事にコメント入れるか、この記事にトラックバックしてください。これは不具合があった場合にご連絡させていただくようにさせていただくためですので、ご協力お願いします。m(_ _)m
<script type="text/javascript"><!--
announce=new Array(
'ここに表示させたい文字を入力してください。はじめとあとの「'」を忘れないようにしましょう。'
);
box_size=20; //表示するボックスの文字数※表示部分の幅が調節できます。
ana_color="#cd5c5c"; //文字色
ana_size=12; //文字の大きさ
ana_msec=350; //表示速度※大きくするとゆっくりになります。
ana_bgcolor="#ffccff"; //背景色
ana_height=20; //表示部分の高さ
document.write("<div style='text-align:center;'><form id='anaform' name='anaform'>");
document.write("<input type='text' size='"+box_size+"' id='anatxt' name='anatxt' accesskey='k' tabindex='50'");
document.write("style='vertical-align:middle;height:"+ana_height+"px;background-color:"+ana_bgcolor+";border-style:none;color:"+ana_color+";font-size:"+ana_size+"px;' />");
document.write("</form></div>");
txtplus="";anast=0;anano=0;nultxt="";
for(i=0;i<box_size;i++)nultxt+=" ";
function scrolltxt(){
if(!anano){
txtplus=nultxt+announce[anast];
anano=txtplus.length;
}
txtplus=txtplus.substring(1);
anano--;
if(!anano){anast++;
if(anast==announce.length)anast=0;
}
document.anaform.anatxt.value=txtplus;
}
setInterval("scrolltxt()",ana_msec);// written by usamo
--></script>
↓ ぽちっと応援お願いします♪ m(_ _)m
