ふわふわ■中心点２３　画像の輪踊る(拡大縮小)変化

●2016/04/30：即時関数で囲んで、グローバル変数を消しました。

■画像が回転するJavaScriptはこちら→　ふわふわ■中心点■１８画像の輪踊る-kurt.grigg-

上記の画像が回転しながら浮遊するJavaScriptに、さらに拡大縮小の動作を追加しました。
以前掲載した類似作と比較すると、ソースが格段に短くなり、輪が画面から消えることもなくなりました。
こちらは一つの輪は同じ画像で、縮小するたびに違う画像に変化します。

■光点が背景色の拡大縮小JavaScriptはこちら→　ふわふわ■中心点■１９　光輪踊る(背景色)拡大縮小
■光点が文字色の拡大縮小JavaScriptはこちら→　ふわふわ■中心点■２０　光輪踊る(文字色)拡大縮小
■文字をCSSで装飾した拡大縮小JavaScriptはこちら→　ふわふわ■中心点■２１光輪踊る(文字CSS)拡大縮小
■画像が複数種類並んで回転する拡大縮小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(ten1.jpg) fixed no-repeat #fec;/*★背景画像指定。固定位置指定。繰り返し無し。背景色薄茶色*/
background-size:auto 100%;/*★背景画像縦幅100%指定。見本の画像の実寸は横550px縦510px*/
background-position:center;/*★左右中央位置指定*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*============================================================================
拡大縮小する踊る光輪。画像１回毎の単発。　オリジナル By kurt.grigg@virgin.net     
*Crazy Circle from Rainbow Arch -->*http://rainbow.arch.scriptmania.com -->
*拡大縮小、画像１回毎単発の参考： Flying Ring of Images By  http://www.fabulant.com.(2010 Peter Gehrig)
★古いブラウザ対応分を削除。背景色の色変化の光点を、画像に変更。　2016/04/30
==============================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像種類指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var fga=["fi1.png","fi2.png","fi3.png"];
var n=9;          //★画像表示数。画像種類より多くても少なくても可。増減可能
var opa=0.9;      //★マウス画像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var spd=20;       //★速度指定。数値が小さいほど速い
var maxb=150;     //★リングの大きさ

/*★↓使用した画像サイズをCSSで調節。横幅か縦幅を片方指定で、同比率で変更されます。例→var WHcss="width:50px;"; 
実寸で使用ならこのままで↓*/
var WHcss="";

//---------------指定項目ここまで--------------------------------------------------
var y=0,x=0,c1=0.05,cs1=0,c2=0.1,cs2=0,b=0,e=Math.round(360/n),j=0;
function fly(){
var h=window.innerHeight, w=window.innerWidth-50, sy=window.pageYOffset, sx=window.pageXOffset;
y=sy+h/2+h/3*Math.cos((cs2)/3)*Math.cos(cs2/50);
x=sx+w/2+w/2.4*Math.sin((cs2)/5)*Math.cos(cs2/30);
cs2+=c2;
}
function Circle(){
for (i=0; i<n; i++){
var divs=document.getElementById("stars"+i).style;
divs.top=(y+b*Math.cos(cs1+i*e*Math.PI/180)*Math.cos(cs1/3)*Math.sin(cs1/6))+"px"; 
divs.left=(x+b*Math.sin(cs1+i*e*Math.PI/180)*Math.cos(cs1/6))+"px";}
cs1-=c1; fly(); setTimeout(Circle,spd);
}
function mini(){ 
b-=0.5; SS=setTimeout(mini,10);
if (b<0) {
for (i=0;i<n;i++) {document.getElementById("stars"+i).innerHTML='<img src="'+fga[j]+'" style="'+WHcss+'">'}	
j++; if (j>fga.length-1) {j=0;}
clearTimeout(SS);big();
}}
function big(){ b+=0.5;LL=setTimeout(big,10); if(b>maxb){ clearTimeout(LL); mini();}}
var sss='';
for (i=0;i<n;i++) {
sss+='<div id="stars'+i+'" style="position:absolute;top:-200px;left:-200px;opacity:'+opa+';"><img src="'+fga[0]+'" style="'+WHcss+'"></div>';}
document.write(sss);
Circle();mini();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

中心点２３■画像の輪踊る(拡大縮小)変化 最終修正日 : 2016/04/30

　中心点２３■画像の輪踊る(拡大縮小)変化　　　　最終修正日 : 2016/04/30