아래는 본예제의 자바스크립트 원문입니다.
<html>
<head>
<title>http://www.blueb.co.kr</title>
<SCRIPT LANGUAGE="JavaScript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var loadImage;
function winWidth() {return ns ? innerWidth : d.body.clientWidth;}
function winHeight(){return ns ? innerHeight : d.body.clientHeight;}
function displayImage(){setTimeout("centerImage()", 40);}
function hideIt(){getLayer("picView").style.visibility = "hidden";}
function getLayer(id)
{
var el = d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(ns) el.style = el;
return el
}
var thePic;
var TargetX;
var TargetY;
var currX, currY;
var theTimer = null;
function centerImage()
{
var str='<A HREF="#" onMouseDown="hideIt();return false;"><img src="'+loadImage.src+'" border=0></A>';
thePic = getLayer("picView");
if(document.layers)
{
thePic.document.write(str);
thePic.document.close();
}
else
thePic.innerHTML=str;
TargetX = (winWidth() -loadImage.width )/2;
TargetY = (winHeight()-loadImage.height)/2;
currX = TargetX;
currY = -100 - loadImage.height;
thePic.style.left = currX;
thePic.style.top = currY;
if(theTimer == null)
theTimer = setInterval("ani()", 40);
thePic.style.visibility = "visible";
}
function ani()
{
TargetX = (winWidth() -loadImage.width )/2;
TargetY = (winHeight()-loadImage.height)/2;
thePic.style.left = currX;
thePic.style.top = currY;
currY += (TargetY - currY)/8;
currX += (TargetX - currX)/8;
}
function popImage(theUrl)
{
getLayer("picView").style.visibility = "hidden";
loadImage = new Image();
loadImage.onload=displayImage;
loadImage.src=theUrl;
return false;
}
var theImages = new Array(
"http://demo.happycgi.com/jini/pick1.jpg",
"http://demo.happycgi.com/jini/pick2.jpg",
"http://demo.happycgi.com/jini/pick3.jpg",
"http://demo.happycgi.com/jini/pick4.jpg",
"http://demo.happycgi.com/jini/pick5.jpg",
"http://demo.happycgi.com/jini/pick6.jpg"
);
var theIndex = 0;
function slide()
{
popImage(theImages[theIndex]);
theIndex = (theIndex + 1) % theImages.length;
setTimeout("slide()", 3000);
}
</SCRIPT>
</head>
<body onLoad="slide()">
이미지를 클릭하면 바로 사라집니다.
<div id="picView" style="position:absolute;"></div>
</body>
</html>
|
