JavaScriptを解説しますＴＯＰに戻る

動く文字を作っちゃえ

前回でCSSの制御は覚えたんで文字を動かすのも簡単ですね

では文字を動かすコード書いてみます↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
p#kokoni{
	position: absolute;
	color: #FFF;
	background-color: #00F;
}
</style>
<script type="text/javascript">
// 文字の現在位置
var iti=0;
// 0なら右1なら左に移動する
var houkou=0;
// 1回に移動する量
var ryou=20;
//移動間隔
var kankaku=20;
function ugoke(){
//文字の現在位置が800未満で「houkou」が0なら「iti」を増やしていく
	if(iti<800&&houkou==0)
	iti+=ryou;
//文字の現在位置が50より上なら「houkou」を1にして「iti」を減らしていく
	else if(iti>50){
		iti-=ryou;
		houkou=1;
	}
//↑2つのどちらに当てはまらなかったら「houkou」を0に戻す
	else
	houkou=0;
	document.getElementById("kokoni").style.left=iti+"px";
}
setInterval("ugoke()",kankaku);
</script>
</head>
<body>
<p id="kokoni">a</p>
</body>
</html>

「position: absolute」これはCSSの絶対位置指定ですね

位置の設定はしていないので通常の場所に表示されます

文字の色と背景色はわかりやすいように変えてるだけなんで気にしなくてOKです

 

今回は「document.getElementById("kokoni").style.left=iti+"px";」という文になってますね

「document.getElementById("ID").style.プロパティ="属性"」だから「left:itipx」と同じ意味ですね

「iti」が変数なので分かりづらいかもしれませんが「left:10px」とかと同じだと思って大丈夫です

 

「ugoke()」で「iti」の値を800より上になったら50より下まで減らす

50より下になったらまた800より上まで増やすを繰り返させてます

 

「document.getElementById("kokoni")」は今まで何度も使ってきましたね

その後の「.style.left=iti+"px";」は初めてです

 

「iti」は変数なんですが紛らわしいので一旦わかりやすいように「iti」を20に固定します

そうすると「document.getElementById("kokoni").style.left="20px";」

↑だと「iti」は20ずつ増減しているので「20px」、「40px」、「60px」と増えていってるわけです

それを毎回「document.getElementById("kokoni").style.left=iti+"px";」で表示しているだけなんです

 

ではちょっと改造して↓みたいにしてみましょう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
p#kokoni{
	position: absolute;
	color: #FFF;
	background-color: #00F;
}
</style>
<script type="text/javascript">
var iti=0;
var iti2=0;
var houkou=0;
var houkou2=0;
var ryou=20;
var kankaku=20;
function ugoke(){
	if(iti<800&&houkou==0&&houkou2==0)
	iti+=ryou;
	else if(iti>50){
		houkou=1;
		iti-=ryou;
	}
	else if(iti2<400&&houkou2==0)
	iti2+=ryou;
	else if(iti2>0){
		houkou2=1;
		iti2-=ryou;
	}
	else{
		houkou=0;
		houkou2=0;
	}
	document.getElementById("kokoni").style.left=iti+"px";
	document.getElementById("kokoni").style.top=iti2+"px";
}
setInterval("ugoke()",kankaku);
</script>
</head>
<body>
<p id="kokoni">a</p>
</body>
</html>

下への動きが追加されましたね

このようにいろいろ改造するのもJavaScriptの楽しみの1つですね

 

じゃあ今回のおさらい

「setInterval」と「変数+"px";」を利用して文字を動かすことも出来る

以上

次回は「一文字ずつ表示させる」です。

 

inserted by FC2 system