Menu

뽀글뽀글... 배경에 거품(물방울) 만들기

2016. 6. 1. 20:14

안개핑 Javascript

 

 


<html>
<head>
<title>무제 문서</title>

</head>

<body>
<p align="center">
  <SCRIPT LANGUAGE="JavaScript">


<!-- Begin
Image0 = new Image();
Image0.src = "http://lia.pe.kr/java Tip/imge/59.gif";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
// End -->
</script>
<p align="center">&nbsp;</p>
<table align="center" border="0" width="403" background="imge/2.gif">
    <tr>
        <td width="393" height="136"><p align="center">&lt;!--3. BODY 부분에 아래의 스크립트를 복사해 넣으세요--&gt;
<p align="center">&lt;!-- 만약 거품을 본문의 내용 뒤쪽에 나타내고 싶으면, 아래의 div/layer, 예제를 따르세요
  --&gt; </p>
<p align="center">&lt;!-- EXAMPLE ------------------------------------- <br>
  &lt;html&gt; <br>
  &lt;head&gt; <br>
  &lt;body&gt; </p>
<p align="center">스크립트 삽입 </p>
<p align="center">&lt;div style=&quot;position:relative&quot;&gt; <br>
  본문의 내용 <br>
  &lt;/div&gt; </p>
<p align="center">&lt;/body&gt; <br>
  &lt;/html&gt; <br>
</p>
        </td>
    </tr>
</table>

</body>
</html>

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

예쁜 물고기가 둥둥 떠다녀요  (0) 2016.06.01
자동으로 즐겨찾기 띄우기  (0) 2016.06.01
미끄러지듯 따라다니는 레이어 만들기  (0) 2016.06.01
달력및 시간  (0) 2016.06.01
사선으로 열리는 화면  (0) 2016.06.01

티스토리툴바