12月2011

Java ScriptでアニメーションGIF風の動きをつける

Java Scriptの勉強、画像の処理です。

1秒ごとに画像を切り替えていきます。結果的にアニメーションGIFと同じ感じの効果がでました。

XHTML

<body onload="setInterval('anime()',1000)">

<p style="text-align:center;">

<img src="img/nemuru01.gif" width="520" height="370" alt="sleep" name="sleeping" /></p>

<p style="text-align:center;"><form>

<input type="button" value="閉じる" onclick="tojiru()" />
</form></p>

</body>

Java Script File

// JavaScript Document

number=1;

function anime(){

if(number==1){

document.sleeping.src="img/nemuru02.gif";

number=2;

}

else if(number==2){

document.sleeping.src="img/nemuru01.gif";

number=3;

}

else if(number==3){

document.sleeping.src="img/nemuru01.gif";

number=4;

}

else if(number==4){

document.sleeping.src="img/nemuru02.gif";

number=5;

}

else if(number==5){

document.sleeping.src="img/nemuru01.gif";

number=6;

}

else if(number==6){

document.sleeping.src="img/nemuru01.gif";

number=7;

}

else if(number==7){

document.sleeping.src="img/nemuru01.gif";

number=8;

}

else if(number==8){

document.sleeping.src="img/nemuru01.gif";

number=9;

}

else if(number==9){

document.sleeping.src="img/nemuru02.gif";

number=10;

}

else if(number==10){

document.sleeping.src="img/nemuru01.gif";

number=11;

}

else if(number==11){

document.sleeping.src="img/nemuru01.gif";

number=12;

}

else if(number==12){

document.sleeping.src="img/nemuru02.gif";

number=13;

}

else if(number==13){

document.sleeping.src="img/nemuru01.gif";

number=14;

}

else if(number==14){

document.sleeping.src="img/nemuru01.gif";

number=15;

}

else if(number==15){

document.sleeping.src="img/nemuru02.gif";

number=16;

}

else if(number==16){

document.sleeping.src="img/nemuru01.gif";

number=17;

}

else if(number==17){

document.sleeping.src="img/nemuru01.gif";

number=18;

}

else if(number==18){

document.sleeping.src="img/nemuru03.gif";

number=19;

}

else if(number==19){

document.sleeping.src="img/nemuru03.gif";

number=20;

}

else if(number==20){

document.sleeping.src="img/nemuru04.gif";

number=21;

}



else{

document.sleeping.src="img/nemuru04.gif";

number=1;

}

}

function tojiru(){

window.close();

}

▼サンプルはこちら

ふつうにアニメーションGIFでできることをなぜ？という疑問には、気づかないフリをしている見習ですぅ。

それに、なんか不必要に長いコードです。きっと、もっとカンタンに済ます方法があるんだろうなぁ。早くできるようになるといいなと期待を持っている見習でした。

2011年12月19日12:40 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

Java Scriptを使って写真を拡大してみる

写真を拡大するのにJava Scriptを使ってみました。

ECサイトとかで、「商品を拡大する」虫眼鏡みたいなのででてきますよね。なんか、カッコE。

コード

<!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" />

  <meta http-equiv="content-style-type" content="text/css" />

  <meta http-equiv="content-script-type" content="text/javascript" />

  <title>写真拡大</title>

  <style type="text/css">

  *{

  margin:0;

  padding:0;

  }

  dl {

  width:400px;

  margin:5px auto;

  }

  dd {

  float: left;

  padding:5px 5px 0 0;

  }

  </style>

  </head>

  <body>

  <dl>

  <dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" name="bigimg" /></dt>

  <dd><img src="img/imgBig01.jpg" width="50" height="38" alt=""

  onmouseover="document.bigimg.src='img/imgBig01.jpg'" /></dd>

  <dd><img src="img/imgBig02.jpg" width="50" height="38" alt=""

  onmouseover="document.bigimg.src='img/imgBig02.jpg'" /></dd>

  <dd><img src="img/imgBig03.jpg" width="50" height="38" alt=""

  onmouseover="document.bigimg.src='img/imgBig03.jpg'" /></dd>

  </dl>

  </body>

  </html>

▼サンプルはこちら

なんか、うれしくなってきた見習ですぅ。わくわく

2011年12月18日1:26 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

CSSを使って写真を拡大する(3)

前回に引き続き、CSSで画像を拡大するです。この前まではマークアップにリストを使いましたが、dlでマークアップしてみました。dlって、画像をコーディングするときによく使うし、liに比べてdtやddが使えるので、クラスやIDの数を減らせるという利点があります。

前々回のお話や、前回のお話は、こちらから。

ということで、いってみよー。

XHTML

<div id="outer">

<p><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></p>

<dl><a href=""><dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></dd></a></dl>

</div>

CSS

*{
	margin:0;
	padding:0;
}
#outer {
	background-color:#FCC;
	position:relative;
	height:500px;
	width:800px;
	margin:5px auto;
}
#outer p{
	position:absolute;
	top:5px;
	left:10px;
	width:400px;
	height:300px;
	background-color:#fff;
}

a {
	display:block;
}
a img  {
	 border:none;
}
a dt {
	display:none;
}
a dd {
	padding-left:420px;
	padding-top:5px;
	float:left;
	}
a:hover {
	position:static;
}
a:hover dt {
	display:block;
	position:absolute;
	top:5px;
	left:10px;
}

▼サンプルはこちら

どうしてだか、IE6でのみ、ddにfloat:leftを入れてやらないと、画像が踊りだしました。マウスが移動するたび、画像が動くのです。ハテ…。最初、IE6でチェックしたら、変な動きをするので、ためしにddに背景色をつけてみました。すると意味不明な背景色がつくので、ここが問題かなと思ったのですが、原因は何でしょう…。ここにフロートかけたら何とかなりそうという、カンでやってしまいました。

いつか、分かる日がくるとイイな、と楽観的に逃げる見習です。とほほ。

2011年12月17日1:42 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

« 古い記事 新しい記事 »