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

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

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

上記のマウスストーカーのJavaScriptから、サイズ指定を削除しました。
サイズ指定をしないので、マウスストーカーの画像は画像実寸で表示します。
さらに、offsetx の数値とoffsety の数値を二つとも削除しました。
そうすると、マウスストーカーの画像が最初は１個で、マウスの動きに連動して連続して並びます。
なお「連なる画像のマウスストーカー」全部の特徴として、一番最初に指定した画像が、一番最後に表示されます。

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:#000;}/*★背景色指定、黒色。不要なら削除*/
--></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/04
=======================================================================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var T1=["gin1.gif","gin2.gif","gin3.gif","gin4.gif","gin5.gif"];
var opa=0.7;    //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var rate=100;   //★原本50。画像同士の揺れ速度。数値が小さいほど揺れ幅が小さい
var hx=30;      //★静止時のx座標。マウスと画像の横位置。マイナス値で左側
var hy=30;      //★静止時のy座標。マウスと画像の縦位置。マイナス値で上側

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)+"px";/*■修正：2016/03/03*/
c.style.top=Math.min(bottomedge, DY)+"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+hx,e.pageY+hy) }
setInterval(cycle,rate);
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー３-５■画像■ 連なる画像・サイズ無し連続 UP日時 : 2016/03/04

　マウスストーカー３-５■画像■　連なる画像・サイズ無し連続　　　UP日時 : 2016/03/04