画像が降る上る２２-１　画像流れ-同時２方向６種(範囲指定)

『画像が流れる-４方向』のJavaScriptをさらに改造。
２方向に同時に画像が流れます。２方向の組み合わせは、数字指定で下記の合計６種を数字選択。
1=↓+↑ 　 2=→+←　 3=↓+→ 　 4=↓+← 　 5=↑+→　 6=↑+←

今回は1指定で、画像が↓と↑の２方向に同時に流れます。
そして、流れる位置は範囲指定できます。
これをbody全面にしたJavaScriptは、こちら。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>画像が降る上る２２-１　画像流れ-同時２方向６種(範囲指定)</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
body{background:url(art2.gif) #e1f6ed;}/*★アジサイの背景画像指定*/

/*★少女の背景画像の指定。必ず#bgimgを指定*/
#bgimg{
background:url(iraie2.gif) no-repeat #bbe2f1;/*★少女の背景画像指定*/
position:absolute;
top:150px;/*★上からの位置*/
left:200px;/*★左からの位置*/
width:250px;/*★横サイズ*/
height:350px;/*★縦サイズ*/
/*★少女の背景画像の装飾。不要なら削除*/
border: solid 1px #ffffff;/*★枠指定*/
border-radius: 20px;/*★角丸指定*/
}
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<div style="position:absolute; top:150px; right:50px;padding:30px;width:40%;background-color: #bbe2f1;border: solid 1px #ffffff;border-radius: 20px;">
<p>『画像が流れる-４方向』のJavaScriptをさらに改造。<br>
２方向に同時に画像が流れます。２方向の組み合わせは、数字指定で下記の合計６種を数字選択。<br>
 1=↓+↑ 　 2=→+←　  3=↓+→ 　 4=↓+← 　 5=↑+→　  6=↑+←<br> 
<br>
今回は1指定で、画像が↓と↑の２方向に同時に流れます。<br>
そして、流れる位置は範囲指定できます。<br>
これをbody全面にしたJavaScriptは、<a href="huru_e22.html">こちら</a>。
</p>
</div>


<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript">
<!--
/*================================================================================
JavaScript by 一撃必殺JavaScript日本語リファレンス→JavaScript例文辞典
http://www.openspc2.org/reibun/javascript/index.html#19
→雪を降らせる　http://www.openspc2.org/reibun/javascript/graphic/022/index.html
=================================================================================
降る画像を複数にして、HTML5対応にして、範囲指定して、同時に２方向に画像が流れる。方向の組み合わせは６種(1=↓+↑  2=→+←  3=↓+→  4=↓+←  5=↑+→  6=↑+← )。
同時流れの改造の参考サイト：オリジナルJavaScript　http://jun88.6.ql.bz/　2014/09/07
==================================================================================*/

//★雪の降る向き指定 1=↓+↑  2=→+←  3=↓+→  4=↓+←  5=↑+→  6=↑+← 
var move=1; 

var snow = new Array();　//★降る画像種類。増減可能だが２個以上指定。同じ画像でも可能
snow[0] = "an1.gif";    //★交互に↓向きの画像と↑向きのを入れる
snow[1] = "an2.gif";    //★向きが3指定の時は↓と→の交互。上記矢印参照
snow[2] = "an3.gif";
snow[3] = "an4.gif";

var num = 20;//★降る画像表示数。２個以上指定
var imgw=20;//★降る画像の最大横サイズ 
var imgh=25;//★降る画像の最大縦サイズ
var speed = 50;//★原本100。小さいほど速い
var opa=0.7;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと


/*★以下４行は、最初はCSSの#bgimg背景画像の設定値と同じ指定にします。しかし背景画像をCSSで装飾すると、上る画像の範囲が微妙にずれることがあります。その場合はこちらの数値で微調整*/
var tp=150;//★背景画像のtop(上)からの位置
var lp=200;//★背景画像のleft(左)からの位置
var xp = 250;//★降る範囲横幅か背景画像横サイズ
var yp = 350;//★降る範囲縦幅か背景画像縦サイズ

var j = 0;
var i = 0;
var m=2;  //★2方向
mo = new Array();
var sx = new Array();
var sy = new Array();
var sp = new Array();

scrnx = xp-imgw;
scrny = yp-imgh;
for (i=0; i<num; i++){
mo[i] = i%m;
sx[i] = Math.floor(Math.random()*scrnx);
sy[i] = Math.floor(Math.random()*scrny);
sp[i] = Math.floor(Math.random()*5) + 1;
document.write("<img src='"+snow[j]+"' style='position:absolute;z-index:3;top:"+sy[i]+"px;left:"+sx[i]+"px; opacity:"+opa+";'id='img"+i+"'>");
if (j == (snow.length-1)) { j = 0; } else { j += 1;}
document.write("<div style='z-index:-1;' id='bgimg'></div>")
}

function moveSnow(){
for (i=0; i<num; i++){
if (move==1){
if(mo[i]==0){
		sy[i] += sp[i];//★↓下向き
		if (sy[i] > scrny)  sy[i] = 0;}
if(mo[i]==1){
		sy[i] -= sp[i];//★↑上向き
		if (sy[i] < 0) sy[i] =  scrny;}}
if (move==2){
if(mo[i]==0){
		sx[i] += sp[i];//★→左から右
		if (sx[i] > scrnx) sx[i] = 0;}
if(mo[i]==1){
		sx[i] -= sp[i];//★←右から左
		if (sx[i] < 0) sx[i] = scrnx;}}
if (move==3){
if(mo[i]==0){
		sy[i] += sp[i];//★↓下向き
		if (sy[i] > scrny)  sy[i] = 0;}
if(mo[i]==1){
		sx[i] += sp[i];//★→左から右
		if (sx[i] > scrnx) sx[i] = 0;}}
if (move==4){
if(mo[i]==0){
		sy[i] += sp[i];//★↓下向き
		if (sy[i] > scrny)  sy[i] = 0;}
if(mo[i]==1){
		sx[i] -= sp[i];//★←右から左
		if (sx[i] < 0) sx[i] = scrnx;}}
if (move==5){
if(mo[i]==0){
		sy[i] -= sp[i];//★↑上向き
		if (sy[i] < 0) sy[i] =  scrny;}
if(mo[i]==1){
		sx[i] += sp[i];//★→左から右
		if (sx[i] > scrnx) sx[i] = 0;}}
if (move==6){
if(mo[i]==0){
		sy[i] -= sp[i];//★↑上向き
		if (sy[i] < 0) sy[i] =  scrny;}
if(mo[i]==1){
		sx[i] -= sp[i];//★←右から左
		if (sx[i] < 0) sx[i] = scrnx;}}
document.getElementById("img"+i).style.top  = tp+sy[i]+"px";
document.getElementById("img"+i).style.left  = lp+sx[i]+"px";
}
setTimeout('moveSnow()',speed);
}
window.onload=moveSnow;
//-->
</script>
<!--★ここまでコピー-->

</body>
</html>

OpenSpace２２-１■画像D■ 画像流れ-同時２方向６種(範囲指定) UP日時 : 2014/09/08

　OpenSpace２２-１■画像D■　画像流れ-同時２方向６種(範囲指定)　　　　　UP日時 : 2014/09/08