マウスストーカー３-３■画像■　連なる画像・サイズ無し

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

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

上記のマウスストーカーのJavaScriptから、サイズ指定を削除しました。
サイズ指定をしないので、マウスストーカーの画像は画像実寸で表示します。
さらにこの見本では、offsety の数値を 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:#cfc;}/*★背景色指定、色。不要なら削除*/
--></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=["usi14.gif","usi11.gif","usi12.gif","usi13.gif","usi10.gif"];
var opa=0.9;    //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var offsetx=52; //x offset of trail from mouse pointer★マウスと画像同士の横位置。この数値を0にすると縦にまっすぐ並ぶ
var offsety=0;  //y offset of trail from mouse pointer★マウスと画像同士の縦位置。この数値を0にすると横にまっすぐ並ぶ
var rate=50;    //★原本50。画像同士の揺れ速度。数値が小さいほど揺れ幅が小さい

var nos=parseInt(T1.length);
for (i=0;i<nos;i++){createContainer("CUR"+i,"<img src='"+T1[i]+"' border=0>")}
function createContainer(N,HT){
with (document){
write("<div id='"+N+"' style='position:absolute;left:-100px; top:-100px;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);/*■修正：2016/03/03*/
var rightedge=window.innerWidth-c.offsetWidth-18;/*■修正：2016/03/03*/
var bottomedge=window.pageYOffset+window.innerHeight-c.offsetHeight-18;/*■修正：2016/03/03*/
c.style.left=Math.min(rightedge, DX+offsetx)+"px";/*■修正：2016/03/03*/
c.style.top=Math.min(bottomedge, DY+offsety)+"px";/*■修正：2016/03/03*/
}
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