تصف هذه المقالة طريقة JavaScript لتحقيق تأثير نثر الثلج الملون من السماء. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
دعنا نلقي نظرة على تأثير الجري أولاً ، كما هو موضح في الشكل أدناه:
رمز المصدر الكامل كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> تسقط جافا سكريبت الثلج الملونة من السماء </title>
<type type = "text/css">
.jb51snow {display: block ؛ الفائض: مخفي. حجم الخط: 12 بكسل ؛ الموقف: مطلق} ؛
الجسم {الخلفية:#000 ؛ الهامش: 0px}
html {overflow: Hidden ؛ الخلفية:#000 ؛}
A {Color: White ؛ Text-Decoration: None}
.jb51title {color: Red ؛ الارتفاع: 140px ؛ العرض: 800px ؛ الهامش: 0px Auto ؛ text-align: Center}
</style>
</head>
<body>
<script type = "text/javaScript">
var yanhua = "yanhua.vevb.com" ؛
var fire = function (r ، color) {
this.radius = r || 12 ؛
this.color = color || "FF6600" ؛
this.xpos = 0 ؛
this.ypos = 0 ؛
this.zpos = 0 ؛
this.vx = 0 ؛
this.vy = 0 ؛
this.vz = 0 ؛
this.mass = 1 ؛
this.p = document.createElement ("span") ؛
this.p.className = "jb"+"51Snow" ؛
this.p.innerhtml = "*" ؛
this.p.style.fontsize = this.radius + "px" ؛
this.p.style.color = "#" + this.color ؛
}
fire.prototype = {
إلحاق: الوظيفة (الوالد) {
parent.appendchild (this.p) ؛
} ،
SetSize: Function (Scale) {
this.p.style.fontsize = this.radius * scale + "px" ؛
} ،
setPosition: function (x ، y) {
this.p.style.left = x + "px" ؛
this.p.style.top = y + "px" ؛
} ،
setVisible: Function (b) {
this.p.style.display = b؟ "كتلة": "لا شيء" ؛
}
}
var fireworks = function () {
var fires = new array () ؛
var count = 100 ؛
var fl = 250 ؛
var vpx = 500 ؛
var vpy = 300 ؛
var gravity = .3 ؛
var floor = 200 ؛
var bounce = -.8 ؛
var timer ؛
يعود {
init: function () {
لـ (var i = 0 ؛ i <count ؛ i ++) {
var color = 0xFF0000 ؛
color = (Math.Random () * 0xffffff) .ToString (16) .ToString (). split (".") [0] ؛
بينما (color.length <6) {
اللون = "0" + اللون ؛
}
var fire = new Fire (12 ، color) ؛
FIRES.PUSH (FIRE) ؛
fire.ypos = -100 ؛
Fire.vx = Math.Random () * 6 - 3 ؛
Fire.vy = Math.Random () * 6 - 3 ؛
Fire.vz = Math.Random () * 6 - 3 ؛
fire.append (document.body) ؛
}
var that = هذا ؛
Timer = setInterval (function () {
لـ (var i = 0 ؛ i <count ؛ i ++) {
that.move (الحرائق [i]) ؛
}
} ، 30) ؛
} ،
نقل: وظيفة (النار) {
fire.vy += الجاذبية ؛
fire.xpos += fire.vx ؛
fire.ypos += fire.vy ؛
fire.zpos += fire.vz ؛
if (fire.ypos> floor) {
fire.ypos = floor ؛
fire.vy *= الارتداد ؛
}
if (fire.zpos> -fl) {
var scale = fl / (fl + fire.zpos) ؛
Fire.SetSize (Scale) ؛
Fire.setPosition (VPX + Fire.xpos * مقياس ،
VPY + Fire.ypos * مقياس) ؛
fire.setVisible (صحيح) ؛
} آخر {
fire.setVisible (false) ؛
}
}
}
}
if (yanhua === 'Yanhua.jb' + '51. ' +' net ')
الألعاب النارية (). init () ؛
وظيفة JB51SNOW () {
window.location.reload () ؛
} if (yanhua === 'Yanhua.jb' + '51. ' +' net ')
SetInterval (JB51SNOW ، 6000) ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.