인터넷정보

그림이 아래로 떨어지게 하는 효과2

알 수 없는 사용자 2007. 10. 17. 12:50
앞에 적은것은 그림을 하나만 지정하지만...
이것은 여러개를 떨어지게 할수가 있습니다.

<head></head> 사이에 먼저 넣습니다.

<SCRIPT LANGUAGE="javascript">
<!--
function timer()
{
var y

y = chara1.style.posTop + 5
if(y > document.body.clientHeight*2) y = 0
chara1.style.posLeft = 100 + Math.sin(y/240) * 75
chara1.style.posTop = y

y = chara2.style.posTop + 7
if(y > document.body.clientHeight*2) y = 0
chara2.style.posLeft = 160 + Math.sin(y/120) * 75
chara2.style.posTop = y

y = chara3.style.posTop + 8
if(y > document.body.clientHeight*2) y = 0
chara3.style.posLeft = 80 + Math.sin(y/350) * 100
chara3.style.posTop = y

y = chara4.style.posTop + 9
if(y > document.body.clientHeight*2) y = 0
chara4.style.posLeft = 230 + Math.sin(y/90) * 120
chara4.style.posTop = y

y = chara5.style.posTop + 7
if(y > document.body.clientHeight*2) y = 0
chara5.style.posLeft = 300 + Math.sin(y/180) * 220
chara5.style.posTop = y

y = chara6.style.posTop + 10
if(y > document.body.clientHeight*2) y = 0
chara6.style.posLeft = 360 + Math.sin(y/350) * 180
chara6.style.posTop = y

y = chara7.style.posTop + 7
if(y > document.body.clientHeight*2) y = 0
chara7.style.posLeft = 500 + Math.sin(y/200) * 220
chara7.style.posTop = y

y = chara8.style.posTop + 8
if(y > document.body.clientHeight*3) y = 0
chara8.style.posLeft = 570 + Math.sin(y/100) * 180
chara8.style.posTop = y
setTimeout("timer()", 50)
}

//-->
</SCRIPT>

넣었나요?

그럼 body태그안에

<body onload="setTimeout('timer()', 50)">

이렇게 넣어줍니다. 로딩을 시킨다는 거죠...

그런다음...
<body> 와 </body> 사이에...

<IMG src="http://oxtag.com/html/img/drip_pink.gif" align="bottom" width="20" height="17" border="0" id="chara1" style="position:absolute;left:100;top:50;" name="chara1">
<IMG src="http://oxtag.com/html/img/drip_yellow.gif" align="bottom" border="0" id="chara2" style="position:absolute;left:200;top:150;" name="chara2">
<IMG src="http://oxtag.com/html/img/drip_blue.gif"  align="bottom" border="0" id="chara3" style="position:absolute;left:300;top:100;" name="chara3">
<IMG src="http://oxtag.com/html/img/drip_pink.gif"  align="bottom" width="20" height="17" border="0" id="chara4" style="position:absolute;left:400;top:250;" name="chara4">
<IMG src="http://oxtag.com/html/img/drip_yellow.gif" align="bottom" width="20" height="17" border="0" id="chara5" style="position:absolute;left:500;top:200;" name="chara5">
<IMG src="http://oxtag.com/html/img/drip_blue.gif" align="bottom" border="0" id="chara6" style="position:absolute;left:600;top:350;" name="chara6">
<IMG src="http://oxtag.com/html/img/drip_pink.gif" align="bottom" border="0" id="chara7" style="position:absolute;left:700;top:300;" name="chara7">
<IMG src="http://oxtag.com/html/img/drip_blue.gif" align="bottom" width="20" height="17" border="0" id="chara8" style="position:absolute;left:800;top:400;" name="ch ara8">

이렇게 집어넣으면 됩니다. http://oxtag.com/html/img/drip_pink.gif 라고 적힌 부분있죠?
거기다가 가각 다른 이미지를 넣어주시면... 끝입니다. 태그연습장에서 연습해 보세요.
반응형