合体９　キラキラ星＋電飾・ツリー４種

■1.クリスマス・ツリーは画像です。電飾の数は9個。
◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』
<!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{
/*★背景色を赤緑黒灰色と、４色を縦に並べる指定。幅はpx指定。%でも可能。90degは角度*/
background-image:linear-gradient(90deg,#f00 10px,#0f0 10px,#0f0 20px,#000 20px,#000 330px,#333 330px);
color:#fff;/*★文字色指定　白*/
}

/*★電飾の装飾。opacity以外を指定*/
#il{       
font-size:100%;   /*★電飾の文字の大きさ。ページの文字指定の影響を受けるので、調整*/
text-shadow: 2px 2px 10px #ff0,   /*★電飾の影指定*/
    -2px 2px 10px #ff0,
    2px -2px 10px #ff0,
    -2px -2px 10px #ff0;
}

/*★電飾の領域指定*/
#Timg{     
position:absolute;/*★必須。position:relativeでも可能。位置指定のしやすい方で、*/
top:100px;/*★この位置をずらせば電飾も移動します。上からの位置*/
left:90px;/*★この位置をずらせば電飾も移動します。左からの位置*/
width:150px;/*★JavaScriptを変更しないなら横幅はこのままで*/
height:200px;/*★JavaScriptを変更しないなら縦幅はこのままで*/
}

/*★キラキラ星の領域指定*/
#waku{     
position:absolute;/*★必須。position:relativeでも可能。位置指定のしやすい方で、*/
top:120px;/*★上からの位置*/
left:110px;/*★左からの位置*/
width:80px;/*★JavaScriptを変更しないなら横幅はこのままで*/
height:130px;/*★JavaScriptを変更しないなら縦幅はこのままで*/
}

/*★キラキラ星の文字装飾。色以外を指定。装飾不要なら削除*/
#font-deko{
font-size:80%;
text-shadow: 1px 1px 1px #0ff,
    -1px 1px 1px #0ff,
    1px -1px 1px #0ff,
    -1px -1px 1px #0ff;
opacity:0.4;
}
-->
</style>
<!--★ここまでコピー。別に、bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。3行目がツリーの画像指定-->

<div id="waku"></div>
<div id="Timg"></div>
<img src="tree.png" style="position:absolute; top:50px; left:50px; width:230px; height:265px;">


<script type="text/javascript">
<!--
/*===============================================================================
by 便利eelife(http://eelife.org/java/java_top.html)
キラキラ星　http://eelife.org/java/ly/kirakirabosi.html
★原本をHTML5対応にし、領域指定と文字フォントの装飾をCSSで指定できるよう改造　2014/11/20
================================================================================*/
var no=50; //★発生させる星の数。好みで
var speed=50; //★画像が動く速度。(単位は千分の一秒)。原本200。小さいほど速い
//★好みの色を指定。増減可能
var clrs = new Array('#fff','#ff0'); 

var dsp_haniX =waku.offsetWidth;  // 発生する星の位置の幅
var dsp_haniY =waku.offsetHeight;  // 発生する星の位置の高さ
var W_top =waku.offsetTop;  // 画面 上からの位置
var W_left =waku.offsetLeft;  // 画面 左からの位置
var i=0; // 色を変える為の変数
var v=0; // 星を得る為の変数

function act(){
v = Math.floor(Math.random()*no); // 乱数の発生０～７（星の発生数）まで
i = Math.floor(Math.random()*clrs.length); // 乱数の発生０～clrs.length（配列 clrs の色の数この場合は４）
M_x = Math.floor(Math.random()*dsp_haniX);
M_y = Math.floor(Math.random()*dsp_haniY);
document.getElementById("Hosi"+v).style.color = clrs[i]; // 求めたID名の星に clrs[i] の色を表示
document.getElementById("Hosi"+v).style.left =(M_x+W_left)+"px";  /*★HTML5対応のため+"px"追加。下も*/
document.getElementById("Hosi"+v).style.top =(M_y+W_top)+"px";
setTimeout("act()",speed); 
}

for (v=0; v<no; v++){
document.write('<div id="Hosi'+v+'" style="position:absolute;-1000px;left:-1000px;"><span id="font-deko">◎</span></div>');}/*■文字フォント指定。★を指定しています*/
window.onload=act();

/*=====================================================================================
クリスマス・ツリー By  HIMAJIN(http://himajin.moo.jp/freejava/tree/tree.html)
★ブラウザIE専用(最新のIEでは動作不可)を、最新IEと他ブラウザ対応に改造。 古いIEでは不可。
text-shadow:を追加して、光にぼかしを追加。　2014/11/17
====================================================================================*/
//色設定（必ず2色以上で）
Colors=new Array();
Colors[0]="#f00";//★赤
Colors[1]="#aaa";//★灰色
Colors[2]="#0f0";//★緑
Colors[3]="#ff0";//★黄色
Colors[4]="#f0f";//★ピンク
Colors[5]="#f60";//★オレンジ
Colors[6]="#80f";//★紫
Colors[7]="#0ff";//★水色
Colors[8]="#00f";//★白ではなく青で

//ポジション設定(画像左上からの位置を指定x,y)
//positions[i]の数だけランプができます(iは必ず連番で)

positions=new Array();
positions[0]=new Array(64,2);
positions[1]=new Array(50,41);
positions[2]=new Array(96,60);
positions[3]=new Array(25,81);
positions[4]=new Array(66,91);
positions[5]=new Array(115,108);
positions[6]=new Array(8,132);
positions[7]=new Array(64,134);
positions[8]=new Array(135,153);

/*動作設定(new Array(8,0)を指定しなければ繰り返す)
control[i]の数だけ順に動作する(iは必ず連番で)
control[i]=new Array(動作の種類,動作回数)
 0:カラーランダム(動作回数を指定)
 1:フェードイン(スピードを指定)
 2:フェードアウト(スピードを指定)
 3:同時点滅(動作回数を指定)
 4:点滅移動(動作回数を指定)
 5:カラーランダムフェードイン(スピードを指定)
 6:カラーランダムフェードアウト(スピードを指定)
 7:ランダム点滅(動作回数を指定)
 8:終了(0を指定)*/

control=new Array();
control[0]=new Array(0,2);
control[1]=new Array(1,100);
control[2]=new Array(3,100);
control[3]=new Array(4,100);
control[4]=new Array(2,2);
control[5]=new Array(5,1);
control[6]=new Array(7,100);
control[7]=new Array(6,1);
//control[8]=new Array(8,0);

//点滅スピード
cyclesec=100;       //ミリ秒
//-----------------------------------------------設定ここまで
basex=Timg.offsetLeft;
basey=Timg.offsetTop;
count=0;fs1=0;fs2=0;fs3=100;
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
xpx = basex + positions[i][0]; 
ypx = basey + positions[i][1];
star="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;color:"+color+";opacity:0;'id='lamp"+i+"'><span id='il'>●</span></div>";
document.write(star);
}

function Illumination(){

if(control[count][0]==1){                                    // カラーランダム
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
document.getElementById("lamp"+i).style.opacity= 1;
document.getElementById("lamp"+i).style.color=color;
}
fs2++;
if(fs2==control[count][1]){count++;count%=control.length;fs2=0;}

}else if(control[count][0]==0){                              //フェードイン
fs1=fs1+control[count][1];
for (i=0; i < positions.length; i++){ 
document.getElementById("lamp"+i).style.opacity= fs1;
}
if(fs1>=1){count++;count%=control.length;fs1=0;}

}else if(control[count][0]==2){                             //フェードアウト
fs3=fs3-control[count][1];
for (i=0; i < positions.length; i++){ 
document.getElementById("lamp"+i).style.opacity= fs3;
}
if(fs3<=0){count++;count%=control.length;fs3=1;}

}else 
if(control[count][0]==3){                             //同時点滅
fs2++;
for (i=0; i < positions.length; i++){
if(fs2%2)
document.getElementById("lamp"+i).style.opacity= 0;
else
document.getElementById("lamp"+i).style.opacity= 1;
}
if(fs2==control[count][1]){
for (i=0; i < positions.length; i++){
document.getElementById("lamp"+i).style.opacity= 1;
}
count++;count%=control.length;fs2=0;}


}else if(control[count][0]==4){                           //点滅移動
fs2++;
for (i=0; i < positions.length; i++){
if(i==fs2%positions.length)
document.getElementById("lamp"+i).style.opacity= 0;
else
document.getElementById("lamp"+i).style.opacity= 1;
}
if(fs2==control[count][1]){
for (i=0; i < positions.length; i++){
document.getElementById("lamp"+i).style.opacity= 1;
}
count++;count%=control.length;fs2=0;}

}else if(control[count][0]==5){                            //カラーランダムフェードイン
fs1=fs1+control[count][1];
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
document.getElementById("lamp"+i).style.color=color;
document.getElementById("lamp"+i).style.opacity= fs1;
}
if(fs1>=1){count++;count%=control.length;fs1=0;}

}else if(control[count][0]==6){                            //カラーランダムフェードアウト
fs3=fs3-control[count][1];
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
document.getElementById("lamp"+i).style.color=color;
document.getElementById("lamp"+i).style.opacity= fs3;
}
if(fs3<=0){count++;count%=control.length;fs3=1;}

}else if(control[count][0]==7){                            //ランダム点滅
fs2++;
for (i=0; i < positions.length; i++){ 
flag=Math.floor(Math.random()*2);
if(flag)
document.getElementById("lamp"+i).style.opacity= 0;
else
document.getElementById("lamp"+i).style.opacity= 1;
if(fs2==control[count][1]){
for (i=0; i < positions.length; i++){
document.getElementById("lamp"+i).style.opacity= 1;
}
count++;count%=control.length;fs2=0;}
}

}else if(control[count][0]==8){                           //終了
clearInterval(setlamp);
}
}
setlamp=setInterval("Illumination()",cyclesec);/* himajin.moo.jp */
// -->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>
合体９■F+O■ キラキラ星＋電飾・ツリー４種 UP日時 : 2014/11/23

　合体９■F+O■　キラキラ星＋電飾・ツリー４種　　　　　UP日時 : 2014/11/23
