マウスストーカー３-４■画像■　連なる画像・横幅設定

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

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

上記のマウスストーカーのJavaScriptから、縦幅指定を削除し、横幅指定のみ設定しました。
今回使用した画像は、横幅も縦幅もそれぞれバラバラで、大小に並んでもいません。
サイズ指定無しで画像実寸で並べると遠近感が出ないので、横幅サイズのみ設定できるようにしました。
PCは画像の横幅だけ指定すると、縦幅は同じ比率で自動で変更になります。
思い通りのサイズの画像が無い時には、この設定を使用することでサイズを変更して下さい。
なお「連なる画像のマウスストーカー」全部の特徴として、一番最初に指定した画像が、一番最後に表示されます。

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:#9cf;}/*★背景色指定、水色。不要なら削除*/
--></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=["an22.gif",100,"an18.gif",80,"an19.gif",50,"an20.gif",60,"an21.gif",60];
var opa=0.9;    //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var offsetx=40; //x offset of trail from mouse pointer★マウスと画像同士の横位置。この数値を0にすると縦にまっすぐ並ぶ
var offsety=20; //y offset of trail from mouse pointer★マウスと画像同士の縦位置。この数値を0にすると横にまっすぐ並ぶ
var rate=50;    //★原本50。画像同士の揺れ速度。数値が小さいほど揺れ幅が小さい

var nos=parseInt(T1.length/2);
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*2+1,"<img src='"+T1[i*2]+"' style='width:"+T1[(i*2+1)]+"px;'>")
}
function createContainer(N,W,HT){
with (document){
write("<div id='"+N+"' style='position:absolute;left:-100px; top:-100px; width:"+W+"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);/*■修正：2016/03/03*/
var rightedge=window.innerWidth-T1[1]-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