이 기사 예제는 JS가 우주와 별이 빛나는 하늘의 배경 효과를 어떻게 깨닫는지를 보여줍니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // h2d xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 우주 별이 빛나는 스카이 배경 효과, JS 특수 효과 </title>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<스타일 유형 = "텍스트/CSS">
.별 {
위치 : 절대;
레이어 백 지하색 : 흰색;
가시성 : 가시성;
상단 : -50px;
너비 : 50px;
높이 : 50px;
글꼴 크기 : 1px;
배경색 : 흰색;
}
.60pt {font-size : 60pt; color :#ff66cc;}
</스타일>
<script language = "javaScript">
<!-
var starnum = 75; // 별 수
var isns = (document.layers);
var _all = (isns)? '' : '모두.';
var _style = (isns)? '' : '.스타일';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
함수 getStartpos (obj) {// 별의 시작 위치 정의 이동
obj.deltay = math.floor (math.random () * 12); // 임의의 함수로 결정합니다
obj.deltax = math.floor (math.random () * 12);
obj.xdir = (math.floor (math.random () * 2) == 1)? '+': '-';
obj.ydir = (math.floor (math.random () * 2) == 1)? '+': '-';
obj.counter = 1;
if (isns) {
obj.clip.width = 1;
obj.clip.height = 1;
obj.moveto (xoffset+pagexoffset, yoffset+pageyoffset);
} 또 다른 {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
}
}
기능 movestar (starn) // 움직이는 별의 위치
{
tmpx = starn.deltax*starn.counter+starn.counter;
tmpy = starn.deltay*starn.counter+starn.counter;
if (isns) {
starn.clip.width = starn.counter / 3;
starn.clip.height = starn.counter / 3;
scrlx = pagexoffset;
scrly = pageyoffset;
if ((starn.left+tmpx> = w_x+scrlx) || (starn.top+tmpy> = w_y+scrly) || (starn.left-tmpx <= scrlx) || (starn.top-tmpy <= scrlx) || (starn.top-tmpy <= scrly) {
getstartpos (starn);
} 또 다른 {
eval ( 'starn.moveby ('+starn.xdir+tmpx+','+starn.ydir+tmpy+');
}
} 또 다른 {
starn.width = starn.counter/3;
starn.height = starn.counter/3;
scrlx = document.body.scrollleft;
scrly = document.body.scrolltop;
if ((starn.pixelleft+tmpx> = w_x+scrlx) || (starn.pixeltop+tmpy> = w_y+scrly) || (starn.pixelleft-tmpx <= scrlx) || (starn.pixeltop-tmpy <= scrlx) || (scrn.pixeltop-tmpy <= scrly) {
getstartpos (starn);
} 또 다른 {
평가 ( 'starn.pixeltop'+starn.ydir+'= tmpy');
평가 ( 'starn.pixelleft'+starn.xdir+'= tmpx');
}
}
starn.counter ++;
}
기능 아미트 () // 모든 별이 움직일 수 있도록합니다
{
for (i = 1; i <= starnum; i ++) {
Movestar (Eval ( 'star'+i));
}
settimeout ( 'animate ()', 100);
}
함수 findwindowparams () {// 별의 시작 위치 정의
W_X = (ISNS)? Window.innerWidth : document.body.clientWidth;
w_y = (isns)? Window.innerHeight : document.body.clientHeight;
xoffset = w_x / 2;
yoffset = w_y / 2;
for (i = 1; i <= starnum; i ++) {
getStartpos (평가 ( 'star'+i));
}
}
함수 Resizens () {
settimeout ( 'document.location.reload ()', 400);
}
(ISNS)? Window.onResize = RESIZENS : Window.onResize = FindWindowparams;
Window.onload = 새 함수 ( "findWindowParams (); animate ();");
->
</스크립트>
</head>
<body>
<바디 bgcolor =#999999>
<script language = "javaScript">
<!-
for (i = 1; i <= starnum; i ++) {// 별의 레이어 정의
document.writeln ( '<div id = "star'+i+'"> </div>');
평가 ( 'var star'+i+'= document.'+_ all+'star'+i+_style);
}
->
</스크립트>
<p> <center>
<font class = 60pt> <br> 우주의 별이 빛나는 하늘에서 날아가 <br> </font>
</센터> <p>
</body>
</html>
작동 효과는 아래 그림에 나와 있습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.