|
HTMLタグ > 画像がマウスカーソルを追いかけてくる・1種類×複数
|
マウスカーソルを、1種類の画像がいくつか追いかけてきます。
1) </title>〜</head>に以下のタグを入れます。
<!-- =========================================================================
Moving Object Library Ver.0.02
http://www.paso.f2s.com/
Copyright(c)2001 Masa, All Rights Reserved.
========================================================================== -->
<style type="text/css">
<!--
.movingobject { position:absolute; left:-200px; top:0px; visibility:visible; }
-->
</style>
<script type=text/javascript language=javascript>
<!--
function setPosition(x, y)
{
if (document.layers) {
this.objstyle.moveTo(x, y);
} else { // IE and N6
this.objstyle.left = x + "px";
this.objstyle.top = y + "px";
}
this.x = x;
this.y = y;
}
function setPositionWithScroll(x, y)
{
var scrlX, scrlY;
if (document.layers) {
scrlX = window.pageXOffset;
scrlY = window.pageYOffset;
this.objstyle.moveTo(scrlX + x,scrlY + y);
} else if (document.all) {
scrlX = document.body.scrollLeft;
scrlY = document.body.scrollTop;
this.objstyle.left = scrlX + x + "px";
this.objstyle.top = scrlY + y + "px";
} else if (document.getElementById) {
scrlX = window.scrollX;
scrlY = window.scrollY;
this.objstyle.left = scrlX + x + "px";
this.objstyle.top = scrlY + y + "px";
}
this.x = x;
this.y = y;
}
function setVisible(s)
{
if (document.layers) {
this.objstyle.visibility = (s)? true : false
} else if (document.all) {
this.objstyle.visibility = (s)? "visible" : "hidden"
} else if (document.getElementById) {
this.objstyle.visibility = (s)? "visible" : "hidden"
}
this.visible = s;
}
function MovingObject(num, src, width, height)
{
document.write('<div id="MVOBJ',num,'" class="movingobject">');
document.write('<img src="',src,'" width="',width,'" height="',height,'">');
document.write('<\/div>');
if (document.layers) {
this.objstyle = document.layers["MVOBJ"+num];
} else if (document.all) {
this.objstyle = document.all["MVOBJ"+num].style;
} else if (document.getElementById) {
this.objstyle = document.getElementById("MVOBJ"+num).style;
}
this.id = "MVOBJ"+num;
this.src = src;
this.width = width;
this.height = height;
this.x = -200;
this.y = 0;
this.visible = 1;
this.move = setPosition;
this.moveScrl = setPositionWithScroll;
this.show = setVisible;
}
function getEventPos(nsEvent)
{
var scrlX, scrlY;
if (document.layers) {
scrlX = window.pageXOffset;
scrlY = window.pageYoffset;
eventPosX = nsEvent.pageX - window.pageXOffset;
eventPosY = nsEvent.pageY - window.pageYOffset;
eventProc(nsEvent.type, eventPosX, eventPosY);
} else if (document.all) {
eventPosX = event.clientX;
eventPosY = event.clientY;
eventProc(event.type, eventPosX, eventPosY);
} else if (document.getElementById) {
eventPosX = nsEvent.clientX;
eventPosY = nsEvent.clientY;
eventProc(nsEvent.type, eventPosX, eventPosY);
}
}
var docWidth, docHeight;
function getDocSize()
{
if (document.layers) {
docWidth = window.innerWidth;
docHeight = window.innerHeight;
} else if (document.all) {
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
} else if (document.getElementById) {
docWidth = window.innerWidth;
docHeight = window.innerHeight;
}
}
function readyDhtml()
{
return((document.layers || document.all || document.getElementById)?1:0);
}
function isNetscape()
{
return((document.layers || document.getElementById && !document.all)?1:0);
}
// -->
</script>
<!-- ====================== End of Moving Object Library ==================== -->
|
2) <body>〜</body>のどこかに以下のタグを入れます。
<!-- =========================================================================
マウス追っかけ流れ星 Ver.0.06
http://www.paso.f2s.com/
Copyright(c)2001 Masa, All Rights Reserved.
========================================================================== -->
<script type=text/javascript language=javascript>
<!--
/***********************************
設定可能なパラメタ(ここから)
***********************************/
var MAXSTAR = 【数】; // 画像の数
var STARIMG = "【画像のファイル名】"; // 画像のファイル名
var STARWIDTH = 【幅】; // 画像の幅
var STARHEIGHT = 【高さ】; // 画像の高さ
var OFFSETX = 10; // マウスからの距離の補正(右方向)
var OFFSETY = 10; // マウスからの距離の補正(下方向)
var PITCH = 0.7; // 進度(0.1〜0.9)大きいほど速い
var TLATE = 100; // 処理の間隔(msec) 分からなければこのまま
/***********************************
設定可能なパラメタ(ここまで)
***********************************/
star = new Array();
starx0 = new Array();
stary0 = new Array();
starx = new Array();
stary = new Array();
targetx = new Array();
targety = new Array();
function eventProc(type, eventX, eventY)
{
targetx[0] = eventX + OFFSETX;
targety[0] = eventY + OFFSETY;
starx0[0] = starx[0];
stary0[0] = stary[0];
}
function moveShootingStar()
{
for (i = 0; i < MAXSTAR; i++) {
starx0[i] = starx[i];
stary0[i] = stary[i];
if (i > 0) {
targetx[i] = starx0[i-1];
targety[i] = stary0[i-1];
}
minusx = (starx0[i] < targetx[i])? 1: 0
minusy = (stary0[i] < targety[i])? 1: 0
starx[i] = targetx[i] + Math.floor((starx0[i] - targetx[i] + minusx) * (1 - PITCH));
stary[i] = targety[i] + Math.floor((stary0[i] - targety[i] + minusy) * (1 - PITCH));
star[i].moveScrl(starx[i], stary[i]);
}
setTimeout("moveShootingStar()", TLATE);
}
if (readyDhtml()) {
for (i = 0; i < MAXSTAR; i++) {
star[i] = new MovingObject(i, STARIMG, STARWIDTH, STARHEIGHT);
starx[i] = star[i].x;
stary[i] = star[i].y;
starx0[i] = starx[i];
stary0[i] = stary[i];
targetx[i] = starx0[i];
targety[i] = starx0[i];
}
if (isNetscape()) {
window.document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getEventPos;
moveShootingStar();
}
// -->
</script>
<!-- ======================= End of マウス追っかけ流れ星 ===================== -->
|
「HTMLタグ」のトップに戻る
|
|
|
