パソコン教室

写真の拡大、縮小、
コメント表示を加えます
ポイントを赤字表記にし、説明をくわえました

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>写真雛型V字</title>
<style type="text/css">
</style>
<script type="text/javascript" src="kiban.js"></script>
<script type="text/javascript" src="swisse/swisse.js"></script>
</head>
<body bgcolor="#808080" onload="sin_5();">
<form name="fona">
<button name="namae1" type="button" onClick="sin_5();">最初から</button>
<input type="text" name="namae2" value="残り=">
<button name="namae3" type="button" onClick="if(iiimove</button>
<button name="namae4" type="button" onClick="clearTimeout(tid);clearTimeout(tid2);">stop</button>
</form>
<script type="text/javascript">
//必須初期設定------
jiku(-20,20,-15,15,1);// 座標軸の両端の値(-x,+x;-y,+y,真偽)
var tid,tid1,tid2,tid3,tid4,tid5,tid6,tid7,tid8,tid9;
//1,写真の読み込み
shacin=[];
nn=come.length-1;
for(i=0;i ban=come[i].substr(0,3);
pho="IMG_0"+ban+".jpg";
document.write('<IMG id="hoto'+i+'" SRC="swisse/'+pho+'" width="320" height="240">');
shacin[i]=document.getElementById('hoto'+i);
shacin[i].style.position="absolute";
}
//2.コメントの読み込み
katari=[];
for(i=0;i<=nn;i++){
com=come[i].substr(4,come[i].length-4);
document.write('');
katari[i]=document.getElementById('kata'+i);
katari[i].style.position="absolute";
}
//3.コメントの表示/非表示
function block_none(nnn){
if(nnn!=0)katari[nnn-1].style.display="none";
前のコメントを消す
katari[nnn].style.display="block";
katari[nnn].style.left=wx(-10,centerx);
katari[nnn].style.top=wy(10,centery);
katari[nnn].style.fontSize="28pt";
katari[nnn].style.color="white";
}
//4.背景写真//小道具準備
//背景写真
//小道具準備
//5.関数5(初期位置の設定)
function sin_5(){
clearTimeout(tid);clearTimeout(tid2);
iii=0;//写真の番号
iik=0;//ケースの番号
zin=0;//前後関係
for(i=0;i shacin[i].style.display="none";
初期設定の写真を見せない
shacin[i].style.left=wx(-20,centerx);
shacin[i].style.top=wy(10,centery);
shacin[i].style.zIndex=nn-zin++;
}
katari[nn].style.display="none";
block_none(0);
一番めのコメントを表記する
t1=0;sin_6();
}
//6.関数6(写真の移動)
function sin_6(){
tid1=setTimeout("sin_6()",10);
t1+=0.01;t=t1;
if(iik==0){
shacin[iii].style.display="block";
xx=line(-20,-8);yy=line(12,-8);
shacin[iii].style.left=wx(xx,centerx);
shacin[iii].style.top=wy(yy,centery);
shacin[iii].style.zIndex=zin++;//被せる
wi=line(2,320);hi=line(1,240);
shacin[iii].style.width=wi;
shacin[iii].style.height=hi;

写真をline関数を使い拡大
}else if(iik==1){ //ケース1の場合
t1=2;
}else if(iik==2){ //ケース2の場合
xx=line(-8,20);yy=line(-8,12);
shacin[iii].style.left=wx(xx,centerx);
shacin[iii].style.top=wy(yy,centery);
shacin[iii].style.zIndex=zin++;//被せる
wi=line(320,2);hi=line(240,1);
shacin[iii].style.width=wi;
shacin[iii].style.height=hi;
}
写真をline関数を使い縮小
else{
iik=0; //ケースを0に戻す
iii++;//iii(写真番号)が1つ増える、つまり、次の写真になる
block_none(iii);
コメントを表記する
document.fona.namae2.value="残り="+(nn-iii-1);
if(iii>nn-1){
clearTimeout(tid1);iii=0;//初期値に戻す
}
}
if(t1>1){
t1=0;
iik++;
}
}
</script>
</body>
</html>
以上です
「ユの字に写真を動かす」を各自おこなうなど、後は好き好きに動きを作る

パソコン教室

写真雛形から、基本形のV字に写真を動かすをおこなうと、
ファィルは下記のようになります

<html>
<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>写真雛型V字
<style type="text/css">
</style>
<script type="text/javascript" src="kiban.js">
<script type="text/javascript" src="swisse/swisse.js">
</head>
<body bgcolor="#808080" onload="sin_5();">
<form name="fona">
<button name="namae1" type="button" onClick="sin_5();">最初から
<input type="text" name="namae2" value="残り=">
<button name="namae3" type="button" onClick="if(iiimove
<button name="namae4" type="button" onClick="clearTimeout(tid);clearTimeout(tid2);">stop</button>
</form>
<script type="text/javascript">
//必須初期設定------
//auto1();auto2();
jiku(-20,20,-15,15,1);// 座標軸の両端の値(-x,+x;-y,+y,真偽)
var tid,tid1,tid2,tid3,tid4,tid5,tid6,tid7,tid8,tid9;
//1,写真の読み込み
shacin=[];
nn=come.length-1;
for(i=0;i<nn;i++){
ban=come[i].substr(0,3);
pho="IMG_0"+ban+".jpg";
document.write('<IMG id="hoto'+i+'" SRC="swisse/'+pho+'" width="320" height="240">');
shacin[i]=document.getElementById('hoto'+i);
shacin[i].style.position="absolute";
}
//2.コメントの読み込み
katari=[];
for(i=0;i<=nn;i++){
com=come[i].substr(4,come[i].length-4);
document.write('<DIV id="kata'+i+'" style= width:400px;height:300px;display:none; ">'+com+'</DIV>');
katari[i]=document.getElementById('kata'+i);
katari[i].style.position="absolute";
}
//3.コメントの表示/非表示
function block_none(nnn){
if(nnn!=0)katari[nnn-1].style.display="none";
katari[nnn].style.display="block";
katari[nnn].style.left=wx(-10,centerx);
katari[nnn].style.top=wy(-7,centery);
katari[nnn].style.fontSize="28pt";
katari[nnn].style.color="white";
}
//4.背景写真//小道具準備
//背景写真
//小道具準備
//5.関数5(初期位置の設定)
function sin_5(){
clearTimeout(tid);clearTimeout(tid2);
iii=0;//写真の番号
iik=0;//ケースの番号
zin=0;//前後関係
for(i=0;i shacin[i].style.display="block";
shacin[i].style.left=wx(-20,centerx);
shacin[i].style.top=wy(12,centery);
shacin[i].style.zIndex=nn-zin++;
}
t1=0;sin_6();
}
//6.関数6(写真の移動)
function sin_6(){
tid1=setTimeout("sin_6()",10);
t1+=0.01;t=t1;
if(iik==0){
shacin[iii].style.display="block";
xx=line(-20,-8);yy=line(12,-8);

shacin[iii].style.left=wx(xx,centerx);
shacin[iii].style.top=wy(yy,centery);
shacin[iii].style.zIndex=zin++;//被せる
}else if(iik==1){ //ケース1の場合
t1=2;
}else if(iik==2){ //ケース2の場合
xx=line(-8,8);yy=line(-8,12);

shacin[iii].style.left=wx(xx,centerx);
shacin[iii].style.top=wy(yy,centery);
shacin[iii].style.zIndex=zin++;//被せる
}else{
iik=0; //ケースを0に戻す
iii++;//iii(写真番号)が1つ増える、つまり、次の写真になる
if(iii>nn-1){
clearTimeout(tid1);
}
}
if(t1>1){
t1=-0.01;
iik++;
}
}
</script>


</body>
</html>

パソコン教室3

前回の続きで、関数について
//5.関数5(初期位置の設定)
この関数は初期値を決めるのものです
function sin_5(){
sin_5の関数は
clearTimeout(tid);clearTimeout(tid2);
iii=0;//写真の番号
iik=0;//ケースの番号
zin=0;//前後関係
for(i=0;i<nn;i++){
shacin[i].style.display="block";
shacin[i].style.left=wx(-25,centerx);
shacin[i].style.top=wy(7,centery);
shacin[i].style.zIndex=nn-zin++;

}
shacinという配列は表記される左からー25上から7の位置で前後関係はnn-zin++
t1=0;sin_6();
}
//6.関数6(写真の移動)
function sin_6(){
tid1=setTimeout("sin_6()",10);
t1+=0.01;t=t1;
if(iik==0){
shacin[iii].style.display="block";
xx=line(-25,7);yy=line(8,0);
shacin[iii].style.left=wx(xx,centerx);
shacin[iii].style.top=wy(yy,centery);
shacin[iii].style.zIndex=zin++;//被せる

line関数で移動をするxがー25から7にyは8から0に移動する

}else if(iik==1){ //ケース1の場合
t1=2;
t1が2にいうことは、t1が1をこえたら,t1=-0.01になるということ、つまり、何もしない、止まっている

}else if(iik==2){ //ケース2の場合
t1=2;
}else{
iik=0; //ケースを0に戻す
iii++;//iii(写真番号)が1つ増える、つまり、次の写真になる
if(iii>nn-1){
clearTimeout(tid1); }
}
この関数が終わる
if(t1>1){
t1=-0.01;
iik++;
}
}
</script>


</body>
</html>
以上が、写真を動かす雛形になります。

パソコン教室2

前回の続きです

//1,写真の読み込み
shacin=[];
shacinという配列を定義する。
nn=come.length-1;
nnとは、comeという配列の長さから1引いたもの
for(i=0;i ban=come[i].substr(0,3);
      banとはcome配列の要素iにおいて、0番目から3つ、今回では3ケタの数字を表わす
pho="IMG_0"+ban+".jpg";
      phoとはIMG_0+ban+.jpgつまり、写真1枚ごとの名前を意味する。
document.write('<IMG id="hoto'+i+'" SRC="swisse/'+pho+'" width="320" height="240">');
写真を横320px縦240pxで表記する
shacin[i]=document.getElementById('hoto'+i);

shacinという配列にidがhoto+iの要素を代入する
shacin[i].style.position="absolute";
shacinという配列のポジションは絶対位置
}
//2.コメントの読み込み
katari=[];
katariという配列を定義する
for(i=0;i<=nn;i++){
com=come[i].substr(4,come[i].length-4);
document.write('<DIV id="kata'+i+'" style= width:400px;height:300px;display:none; ">'+com+'</DIV>');
divで囲み動かす、idはkata+i,幅400画素、高さ300画素、表記しない
katari[i]=document.getElementById('kata'+i);katariという配列にkata+iの要素を代入する

katari[i].style.position="absolute";
katariという配列の位置は絶対位置
}
//3.コメントの表示/非表示
function block_none(nnn){
if(nnn!=0)katari[nnn-1].style.display="none";
もし、nnnが0でないとき、katariという配列は表記されない
katari[nnn].style.display="block";
katariという配列は表記される
katari[nnn].style.left=wx(-10,centerx);
katariという配列は左から、Xはー10、
katari[nnn].style.top=wy(-7,centery);
katariという配列は上からyha-7
katari[nnn].style.fontSize="28pt";
katariという配列はフォントサイズは28pt
katari[nnn].style.color="white";
katariという配列は色は白}
//4.背景写真//小道具準備
//背景写真
//小道具準備

とりあえず、ここまで、後は関数が続きますが、次回にします。

パソコン教室_解釈1

私なりのソースの解釈です、
違っていたらごめんなさい。
<html>
<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>写真雛型
<style type="text/css">
</style>
<script type="text/javascript" src="kiban.js">
外部ファィルkiban.jsをプログラムに呼び込みます
<script type="text/javascript" src="swisse/swisse.js">
外部ファィルswisse.jsをプログラムに呼び込みます
</head>
<body bgcolor="#808080" onload="sin_5();">
ボディの色は#808080です、最初に実行するプログラムは、sin_5()です。
<form name="fona">
フォームの名前はfonaです
<button name="namae1" type="button" onClick="sin_5();">最初から</button>
ボタンの名前はnamae1です、この「最初から」ボタンをクリックするとsin_5()はじまります。<input type="text" name="namae2" value="残り=">
インプットタイプのボタンで、名前はnamae2です、写真の残り枚数を表記します。
<button name="namae3" type="button" onClick="if(iii<nn){clearTimeout(tid);sin_6();}else{clearTimeout(tid2);epilogue();}">move</button>
ボタンの名前はnamae3です、写真番号が写真の全枚数を超えないうちにmoveというボタンをおしたら、sin_6()関数が動きます、写真の再開です。それ以外、写真番号が写真の全枚数を超えとぃるときにmoveというボタンえを押したらepilogue関数がうごきます、エピローグの再開です。
<button name="namae4" type="button" onClick="clearTimeout(tid);clearTimeout(tid2);">stop</button>
ボタンの名前はnamae4です。stopボタンを押すと、タイムIDとタイムID2が働き動きが止まります。</form>
<script type="text/javascript">
//必須初期設定------
//auto1();auto2();
jiku(-20,20,-15,15,1);// 座標軸の両端の値(-x,+x;-y,+y,真偽)
kiban.jsファィルにあるjiku関数を-20,20,-15,15設定で表記します。
var tid,tid1,tid2,tid3,tid4,tid5,tid6,tid7,tid8,tid9;
タイムIDを定義します
今回はここまで、夕食の用意してきます。
ダンス
こんなに動けたらいいな・・・・
ポチして下さい
ブログランキング参加してます ポチして下さいお願いします

FC2Blog Ranking

プリザーブドフラワー時計
インテリア 雑貨 エコロジー
リンク
リンク用バナー
banner
banner
banner
banner
カレンダー 月
プロフィール

KUMIROM

Author:KUMIROM
FC2ブログへようこそ!
アバーターはツカエルサイト
作りました

最新記事
BGM
再生ボタンを押すと音楽がながれます
サウンドファィルを再生できませんでした
月別アーカイブ
カテゴリ
アクセスカウンター
おすすめサイト
アフィリエイト・SEO対策