マウスストーカー３-２■画像■　連なる画像・サイズ設定

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

■マウスに画像がぶら下がるように連なるJavaScriptはこちら→　マウスストーカー３■画像■連なる画像

上記のマウスストーカーと、このJavaScript自体は同じです。
ただし上記の場合の画像のサイズ指定は、大小のサイズ違いの画像を使用して、その実寸を記述しました。
今回は全部同じサイズ（横幅22px縦幅21px）の画像を使用し、サイズ指定で大小の表示になるようにしました。
極端な話、画像が1個しかなくても、それぞれ違うサイズを指定して並べることもできます。
さらに、offsetx の数値を 0 にすることで、画像を縦一直線に並べています。
なお「連なる画像のマウスストーカー」全部の特徴として、一番最初に指定した画像が、一番最後に表示されます。

2016/02/11に秋天さんより、このJavaScriptの欠点とその修正方法を教えて頂きました。
■2016/03/03に修正完了しました。秋天さん、ほんとうにありがとうございます。

■画像のサイズ指定を削除した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:#eee;}/*★背景色指定、薄灰色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
/*===================================================================================
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
★連なる画像のマウスストーカー。古いブラウザ対応分を削除。画像の透過指定を追加　　2016/03/03
======================================================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

/*★画像指定。名前の後の数字は画像の横幅と高さ。「画像名、横幅、縦幅」のセット順で記述。増減可能*/
var T1=["mis1.gif",38,35,"mis2.gif",30,31,"mis3.gif",28,26,"mis4.gif",22,21,"mis1.gif",18,18,"mis2.gif",14,14];
var opa=0.7;     //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var offsetx=0;   //x offset of trail from mouse pointer★マウスと画像同士の横位置。この数値を0にすると縦にまっすぐ並ぶ
var offsety=30;  //y offset of trail from mouse pointer★マウスと画像同士の縦位置。この数値を0にすると横にまっすぐ並ぶ
var rate=50;     //★原本50。画像同士の揺れ速度。数値が小さいほど揺れ幅が小さい

var nos=parseInt(T1.length/3);
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*3+1,i*3+2,"<img src='"+T1[i*3]+"' style='width:"+T1[(i*3+1)]+"px; height:"+T1[(i*3+2)]+"px;'>")
}
function createContainer(N,W,H,HT){
with (document){
write("<div id='"+N+"' style='position:absolute;left:-100px; top:-100px; width:"+W+"px; height:"+H+"px; opacity:"+opa+";'>"+HT+"</div>");
}}
function getXpos(N){ return parseInt(document.getElementById(N).style.left) }
function getYpos(N){ return parseInt(document.getElementById(N).style.top) }
function moveContainer(N,DX,DY){
var c=document.getElementById(N).style;
var rightedge=window.innerWidth-T1[1]-18;/*■修正：2016/03/03*/
var bottomedge=window.pageYOffset+window.innerHeight-T1[2]-18;/*■修正：2016/03/03*/
c.left=Math.min(rightedge, DX+offsetx)+"px";
c.top=Math.min(bottomedge, DY+offsety)+"px";
}
function cycle(){
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)));
}}
document.onmousemove=function (e){ moveContainer("CUR"+(nos-1),e.pageX,e.pageY) }
setInterval(cycle,rate);
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー３-２■画像■ 連なる画像・サイズ設定 最終修正日 : 2016/03/03

　マウスストーカー３-２■画像■　連なる画像・サイズ設定　　　最終修正日 : 2016/03/03