マウスストーカー３■画像■　連なる画像

●2016/03/03：即時関数で囲んで、グローバル変数を消しました。
複数の画像が連なるマウスストーカーです。古いブラウザ対応分を削除し、画像の透過を追加しました。
offsetx と offsety の数値を変更すると、横に並べたり縦に並べたりできます。画像同士の間隔もこの数値で変更します。
原本はこちらから。
なお「連なる画像のマウスストーカー」全部の特徴として、一番最初に指定した画像が、一番最後に表示されます。

2016/02/11に秋天さんより、このJavaScriptの欠点とその修正方法を教えて頂きました。

―前略―
bottom edgeを指定してしているのに、際限なくスクロールすることが問題ということ。
スクロールしてもいいのなら、マウスイベントだけで良いのだから。
innerWidth/innerHeight はスクロールバーを含む（見えていなくても）サイズを取得するから、下記のようにするだけでページの下でストップする。
殆どのブラウザで17pxだがオペラが18pxだと思うので、

var rightedge = window.innerWidth -T1[1]-18;
var bottomedge= window.innerHeight-T1[2]-18+window.pageYOffset;
―後略―

■2016/03/03に修正完了しました。秋天さん、ほんとうにありがとうございます。

■画像のサイズ指定が横幅縦幅の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:#ffc;}/*★背景色指定、薄黄色。不要なら削除*/
--></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=["trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10];
var opa=0.8;    //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var offsetx=15; //x offset of trail from mouse pointer★マウスと画像同士の横位置。この数値を0にすると縦にまっすぐ並ぶ
var offsety=10; //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