توضح أمثلة هذه المقالة كيف يحقق JS تأثير الخلفية للكون والسماء النجمية. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // h2d xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> تأثير خلفية Sky Sky Cosmic Starry ، JS Special Effect </title>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<type type = "text/css">
.star {
الموقف: مطلق ؛
طبقة الخلفية اللون: أبيض.
الرؤية: مرئية ؛
أعلى: -50px ؛
العرض: 50 بكسل ؛
الارتفاع: 50 بكسل ؛
حجم الخط: 1px ؛
خلفية اللون: أبيض.
}
.60pt {font-size: 60pt ؛ color:#ff66cc ؛}
</style>
<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 ؛
إذا (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 ؛
إذا (isns) {
starn.clip.width = starn.counter / 3 ؛
starn.clip.height = starn.counter / 3 ؛
scrlx = pagexoffset ؛
scrly = pageyoffset ؛
إذا (((starn.left+tmpx> = w_x+scrlx) || (starn.top+tmpy> = w_y+scrly) || (starn.left-tmpx <= scrlx) || (starn.top-tmpy <= scrlx) ||
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) ||
getStartPos (Starn) ؛
} آخر {
eval ('starn.pixeltop'+starn.ydir+'= tmpy') ؛
eval ('starn.pixelleft'+starn.xdir+'= tmpx') ؛
}
}
Starn.Counter ++ ؛
}
الوظيفة ANIMATION () // دع جميع النجوم تتحرك
{
لـ (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 ؛
لـ (i = 1 ؛ i <= starnum ؛ i ++) {
getStartPos (eval ('star'+i)) ؛
}
}
RESIZENS () {
setTimeout ('document.location.reload ()' ، 400) ؛
}
(ISNS)؟ window.onresize = resizens: window.onresize = findWindowParams ؛
window.onload = وظيفة جديدة ("findWindowParams () ؛ animate () ؛") ؛
->
</script>
</head>
<body>
<body bgcolor =#999999>
<script language = "javaScript">
<!-
لـ (i = 1 ؛ i <= starnum ؛ i ++) {// تحديد الطبقات للنجوم
document.writeln ('<div id = "star'+i+'"> </viv>') ؛
eval ('var star'+i+'= document.'+_ all+'star'+i+_style) ؛
}
->
</script>
<p> <center>
<font class = 60pt> <br> تطير في سماء الكون <br> <br> </font>
</center> <p>
</body>
</html>
يظهر تأثير التشغيل في الشكل أدناه:
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.