マウスストーカー７■画像■　華やかなマウス-GF作品-

●2016/04/26：即時関数で囲んで、グローバル変数を消しました。
マウスから渦を巻いて画像が次々に湧き上がるような、華やかなGF作品のマウスストーカーです。
GF作品については、Gerard Ferrandez作品についての説明をお読み下さい。

前回掲載分では、リンクが押せないという欠点がありました。
それを重ね方のCSS「z-index」を、JavaScriptのソースの中でマイナス指定することで、クリアしました。
当然ですが、マイナス指定をするとリンクは押せるけれども、文章や通常の画像の上ではマウス画像が下に隠れます。
マウスストーカーとしては不完全ですが、とっても綺麗でしょ！

■2016/05/13→2016/05/14：マウスの座標指定を修正
■2016/07/05：「window.onload」は上書きするそうなので修正。

<!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>マウスストーカー７■画像■　華やかなマウス-GF作品-</title>

<!--★ここからコピー-->
<style type="text/css"><!--
/*★背景画像指定。不要なら削除*/
body{
background:url(ko4.jpg) center top no-repeat #030354;/*★背景画像指定。左右中央。繰り返し無し。背景色紺色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦526px*/
overflow-y:scroll;/*★縦スクロールバーを表示する。この方がチラチラしないが不要ならこの1行は削除*/
overflow-x:hidden;/*★横スクロールバーを出さない。横スクロールバーが出ないと困るならこの1行は削除*/
}
#GFms{ position:absolute;top:-100px;}/*★必須。body記述のマウス画像を表示させない*/
--></style>
<!--★ここまでコピー　bodyの中に画像指定とコピーがあります-->

</head>
<body>

<!--★ここからコピー。マウス画像指定。増減可。<div id="GFms"～>●</div>の●の位置に指定して下さい-->
<div id="GFms">
<img src="sun24.png">
<img src="../huruaga/wb20.png">
<img src="../huruaga/w10.png">
<img src="w30.png">
<img src="haato1g.gif">
<img src="haato2g.gif">
<img src="../huruaga/w20.png">
</div><!--★マウス画像指定終了-->

<script type="text/javascript"><!--
/*=======================================================
華やかなマウス　script by Gerard Ferrandez - ge1doot - feb 2000(http://www.dhteumeuleu.com)
news://news.leibowitz.org/nzn.fr.html　　js保管サイトhttp://www.geocities.jp/kawaida_1167/
★HTML5対応、画像の重ね方指定　　2016/07/05
=========================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var num=100;      //★マウス画像表示数。マウス画像指定はbodyですること
var Zx=-1;        //★文章の上にマウス画像が流れるか？　上に流れる：1   下に隠れる：-1。マイナス指定にしないとリンクが押せない

//指定ここまで-------------------------------------------------------------------
var object=[], R, xm, ym, o;
var kr = Math.PI/180;
function CObj(N,obj,pr,pk){
	this.img = document.createElement("img");
	this.img.src = obj.src;
	this.img.style.zIndex =Zx;//修正
        this.img.style.position="absolute";
	document.body.appendChild(this.img);
	this.dL   = this.img.style.width  / 2;
	this.dH   = this.img.style.height / 2;
	this.N    = N;
	this.sens = 1;
	this.xmb  = 0;
	this.r    = 0;
	this.k    = 0;
	this.pk   = pk;
	this.pr   = pr;
	this.x    = xm;
	this.y    = ym;
	this.dhTeuMeulEu = function (){
	   with (this) {
		img.style.left = Math.round(x - dL + Math.cos((k -= pk * sens) * kr) * (r += pr))+"px";
		img.style.top  = Math.round(y - dH - (r * .5) + Math.sin(k * kr) * r)+"px";
		if(r > R + 2 * N){ y=ym; x=xm; r=0; sens=xm>xmb?1:-1; xmb=xm;}
		}
	}
}
function run(){ for(i in object){object[i].dhTeuMeulEu();} setTimeout(run, 16);}
function GeFe(){
	R  = 40;
	xm =(window.innerWidth-18)/2;
	ym =(window.innerHeight-18)/2;
	document.onmousemove = function(e){xm=e.pageX;ym=e.pageY;}
	var I = document.getElementById("GFms").getElementsByTagName("img");
	for(i=0;i<num;i++){o = I[i%I.length];object[i] = new CObj(i, o, 2, 80/o.width);}
	run();	
}
GeFe();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー７■画像■ 華やかなマウス-GF作品- 最終修正日 : 2016/07/05

　マウスストーカー７■画像■　華やかなマウス-GF作品-　　　　最終修正日 : 2016/07/05