合体１-１■マウスのスライドGIFアニメ風

●2016/03/03：即時関数で囲んで、グローバル変数を消しました。
ゆっくりと画像がマウスに追随する、マウスストーカーのJavaScriptと、簡単スライドショーの合体です。
スライドショーの切替速度を非常に短くして、GIFアニメ風にしました。速度を0.3秒に設定です。
この方法で、拡張子GIFではない色違いの画像でもスライドさせて、GIFアニメ風に見せることができます。

■合体元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>合体１-１■マウスのスライドGIFアニメ風</title>

<style type="text/css"><!--
body{background:#000;color:#fff;}/*★背景色黒色。文字色白色。不要なら削除*/
--></style>

</head>
<body>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*=============================================================================
画像１個で後追いマウスストーカー：http://infoseek_rip.g.ribbon.to/iswebmag.hp.infoseek.co.jp/sample199.html　　
★マウスの画像に簡単スライドショーを合体　　2016/03/03
==============================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var mga=["and5.gif","and6.gif","and7.gif"];
var myurl="";         //★画像パス。文書とは別のフォルダーなどに入っている時は指定。同じ時は"";で
var sspd=300;         //★スライドショーの切替速度 1000=1秒
var hx=10;            //★表示位置 x座標。マウスと画像の横位置。マイナス値で左側
var hy=20;            //★表示位置 y座標。マウスと画像の縦位置。マイナス値で上側
var mspd=10;          //★原本10。マウスと画像の速度。小さいほど速い
var st=30;     　　　 //★原本20。マウスと画像の追いつき変化速度。小さいほど変化が小さい(離れにくい)

var load=new Array();   //画像先読み込み。切替をスムーズにする
for (var p=0,len=mga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+mga[p];}
function mShow(){ Mo.src=myurl+mga[i%len]; i++; setTimeout(mShow,sspd);}
var ix=0,iy=0,mx=0, my=0;
document.onmousemove=function (e){ mx=e.pageX; my=e.pageY;}
function Run() {
ix+=(mx-ix)/st; iy+=(my-iy)/st;
Mo.style.left=ix +hx+ "px"; Mo.style.top=iy +hy+ "px";
setTimeout(Run,mspd);
}
document.write("<img src="+myurl+mga+" id='Mo' style='position:absolute;top:-30px;left:-30px;'>");
mShow();Run();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体１-１■Ms+Sl■ マウスのスライドGIFアニメ風 UP日時 : 2016/03/03

　合体１-１■Ms+Sl■　マウスのスライドGIFアニメ風　　　　UP日時 : 2016/03/03