合体１２　渦巻く星を一発開閉

渦巻く星（ブラックホール）のJavaScriptは面白いのですが、メインの記事の邪魔になることもあります。
訪問者によってはウザイと思う方もいますし、１回見れば充分と思う方もいます。
そんな方のために、開閉ボタンで渦巻く星（ブラックホール）のJavaScriptを消せる、JavaScriptです。
なお、合体元のブラックホールは遠のきますが、こちらのブラックホールは近づきます。

■合体元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:#dca;}/*★背景色指定*/

/*★中身の背景画像指定。#hosiを必ず記述*/
#hosi{
margin:20px auto;/*★中央指定*/
width:900px;/*★背景画像と同じ横幅*/
height:400px;/*★背景画像と同じ縦幅*/
background:#ccccff url(usi4.jpg);/*★中身の背景画像名*/
/*★以下の装飾は不要なら削除。角丸にして、内側に影を付けています*/
border:solid 1px #fff;/*★枠線　白*/
border-radius: 20px;/*★角丸指定*/
box-shadow: 5px 5px 10px #333 inset;/*★画像の内側に影*/
}

.btS{margin-left:100px;}/*★開閉ボタンの位置指定*/
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<input type="button" value="星空開閉" onclick="open_close();return false;" title="クリックで閉じる。再クリックで開く" class="btS">
<!--★↓最初から見えるように、style="display:block;"を指定。 id="don"必須-->
<div id="don" style="display:block;">
<!--★↓ここから開閉幕の中身。divではなくimgでもpでも可-->
<div id="hosi"></div>

<!--★ここから星空のブラックホール-->
<script type="text/javascript">
<!--
/*=====================================================================================
「■ 遠ざかる（近づく）画像」宇宙の墓場　ブラックホール」star  ver1.10  
By　 http://kyoei.arrow.jp/templ/move2/star05.html（ぱーぷりんの溜まり場）
本サイト　http://kyoei.arrow.jp/jissai.html(京栄一級建築士事務所のテンプレートから)
★ブラウザIEとFirefoxのみ動作を、他ブラウザ対応、HTML5対応に改造。　　2015/01/08
=======================================================================================*/
ugoku=new Array();   // この行は触らないで・・
// *******************************  入力事項  **********************************
// ======= 入力１：画像の種類および動きの調整（0から順に必要な種類数だけ入力）
// １番目で画像の速さの最大値を入力。 正数で遠ざかり、負数で近づく （目安値 10）★負数指定で近づく
// ２番目で円の回転速さの最大値を入力 +:時計廻 -:反時計廻 0:無回転 （目安値 10）
// ３番目で出したい画像を、アドレスを含むファイル名で指定
ugoku[0]=new Array( -30, -10, "star48.png");
ugoku[1]=new Array( -35, -15, "star24.png");

var imgw=48;//使用画像の内の最大横幅
var imgh=48;//使用画像の内の最大縦幅

// ======= 入力２：全体表示の調整（ [ ]内は、近づく場合）
var Xo= 500 ;  // 回転中心の、画面左端からの距離（ピクセル）
var Yo= 300 ;  // 回転中心の、画面上端からの距離（ピクセル）
var lr=  10 ;  // 画像の大きさで、大きいほど全体的に大きくなる  （目安値 10）
var pd=  20 ;  // 画像が消える[発生する]遠さ。大きいほど遠い    （目安値 10）
var vp=  10 ;  // 画像の発生する[消える]近さ。小きいほど近い    （目安値 10）
var oar= 30 ;  // 画像の発生する範囲。 小きいほど中心に密集する （目安値 10）
// ======= 入力３：補助入力事項
var no=  40 ;  // 画面に同時に出す画像数を入力
var srl= -1 ;  // 画像も同時にスクロールさせるか？        （ yes=1 , no=-1 ）
  // 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg= 10 ;  // 一秒間の描画の切替数。大きい程全体の動きが速い（目安値 10）
// ***************************** 入力事項ここまで ******************************

// ----- 共通変数・配列の設定 -----
var docW, docH, offW, offH;
v =new Array(); z =new Array(); sp=new Array(); rd=new Array();
dx=new Array(); dy=new Array(); r =new Array(); sita=new Array();
// ----- 開始値の設定 -----
var j=0; vp=vp/100; lr=lr/5; brSize();
for(i=0; i<no; i++){
document.write("<img src='"+ugoku[j][2]+"' id='img"+i+"' style='position:absolute; z-index:50;'>");
dx[i]=imgw; dy[i]=imgh; sp[i]=ugoku[j][0]; rd[i]=ugoku[j][1];
prim(i);
if(j==(ugoku.length-1)){j=0} else{j+=1} }
// ----- メインの設定 -----
function star(){
for(i=0; i<no; i++){
   if( z[i]>pd || z[i]<vp ){ brSize(); prim(i) }
z[i]+=v[i]; sita[i]+=rd[i]/50;
sx=r[i]*Math.cos(sita[i])/z[i]+Xo;
sy=r[i]*Math.sin(sita[i])/z[i]+Yo;
sdx=dx[i]/z[i];  sdy=dy[i]/z[i];
while(sx<0 || sy<0 || (sx+sdx*lr)>docW || (sy+sdy*lr)>docH){
     if ( z[i]<vp ){ brSize(); prim(i) }
z[i]+=v[i]; sita[i]+=rd[i]/50;
sx=r[i]*Math.cos(sita[i])/z[i]+Xo;
sy=r[i]*Math.sin(sita[i])/z[i]+Yo;
sdx=dx[i]/z[i];  sdy=dy[i]/z[i] }
Disp(i,sx,sy) }
setTimeout("star()",1000/chg);}
// ----- 画像を発生する -----
function prim(i){
 if (sp[i]>0) { z[i]=vp } else{ z[i]=pd };
v[i]=[0.6*Math.random()+0.4]*sp[i]/15;
ro=Math.sqrt(Math.pow(docW,2)+Math.pow(docH,2))/2;
 if (sp[i]>0) { r[i]=ro*Math.random()*oar/4 }
       else{ r[i]=ro*Math.random()*oar*5/pd };
sita[i]=2*Math.PI*Math.random() }
// ----- ブラウザのサイズ -----
function brSize(){
docW=window.innerWidth; docH=window.innerHeight; offW=window.pageXOffset; offH=window.pageYOffset;
if(srl < 0){ offW=0; offH=0 }}
// ----- 画像を移動させる -----
function Disp(i,sx,sy){
document.getElementById("img"+i).style.width =lr/z[i]*dx[i]+"px";
document.getElementById("img"+i).style.height=lr/z[i]*dy[i]+"px";
document.getElementById("img"+i).style.left=sx+offW+"px";
document.getElementById("img"+i).style.top =sy+offH+"px"}
window.onload=star;
// -->
</script>
<!--★ここまで星空のブラックホール-->
</div><!--★ここまで開閉幕の中身-->

<script type="text/javascript"><!--★ここから開閉幕-->
<!--
/*=============================================================
tableの行開閉 By　http://never-ever.info/modules/news/index.php?page=article&storyid=397　　
★tableの行の開閉をdivに変更(開閉幕)　2015/02/03
=============================================================*/
//■最初は開いてる
function open_close(){
   if (don.style.display=="block") {don.style.display="none"} else {don.style.display="block"}
}
//-->
</script><!--★ここまで開閉幕-->
<!--★ここまでコピー。コピー終わり-->

<br><br><br>
</body>
</html>

合体１２■F+O■ 渦巻く星を一発開閉 UP日時 : 2015/03/18

　合体１２■F+O■　渦巻く星を一発開閉　　　　　UP日時 : 2015/03/18