雪花那个飘

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kuikui/archive/2012/07/02/2573852.html

文章标签：

#javascript #ViewUI

雪花那个飘
“雪花”相对父容器绝对定位，向父容器中增加一片片“雪花”。
创建“雪花”，document.createElement("span"),为“雪花”增加css样式，设定初始值top和left。
top设为相对父元素-parseInt(spanY + Math.random() * 20)，即偏移顶部多少的一个小范围值。
left相对父元素parseInt(Math.random() * 900)，即随即在900这个范围内取值。
N指雪花的数
pId指父容器
eSpan指“雪花”并为雪花设置样式

                this.N = N;
                this.pId = pId;
                
                var eSpan = document.createElement("span");
                this.pId.appendChild(eSpan);
                with (eSpan.style) {
                    top = -parseInt(spanY + Math.random() * 20) + "px";
                    left = parseInt(Math.random() * 900) + "px";
                    width = spanWH + "px";
                    height = spanWH + "px";
                    background = "#FF0000";
                    border = "#666666 solid 1px";
                }

run方法，控制每一片“雪花”飘落，当到底部时重新初始化。哈哈，这样“雪花”飘落的效果基本完成。
step指移动步长
tmp指“雪花”飘落的高度
mheight指允许飘落的最大高度
obj即当前的雪花

                this.step = 1;
                this.tmp = 1;
                this.mheight = 600;
                this.obj = eSpan.style;
                
                this.run = function () {
                    with (this) {
                        obj.background = "#FF0000";
                        if (tmp > mheight) {
                            tmp = -parseInt(spanY + Math.random() * 20);
                            obj.left = parseInt(Math.random() * 900) + "px";
                            step = 1;
                        }
                        else {
                            tmp = parseInt(step += 5);
                        }
                        obj.top = tmp + "px";
                        setTimeout("arr[" + N + "].run()", 16);
                    }
                }

示例演示：

<!DOCTYPE html> <html> <head> <title>雪花那个飘</title> <style type="text/css"> *{margin:0px; padding: 0px;} #test{width:980px; height: 800px; margin:0 auto; position: relative;background-color:#F1F1F1;overflow:hidden;} #test span{position: absolute;} </style> </head> <body> <div id="test"></div> <script type="text/javascript"> window.onerror = new Function("return true"); var arr = new Array(); var spanY = 30; var spanWH = 25; function creSpan(N, pId) { this.N = N; this.pId = pId; this.step = 1; this.tmp = 1; this.mheight = 600; var eSpan = document.createElement("span"); this.pId.appendChild(eSpan); with (eSpan.style) { top = -parseInt(spanY + Math.random() * 20) + "px"; left = parseInt(Math.random() * 900) + "px"; width = spanWH + "px"; height = spanWH + "px"; background = "#FF0000"; border = "#666666 solid 1px"; } this.obj = eSpan.style; this.run = function () { with (this) { obj.background = "#FF0000"; if (tmp > mheight) { tmp = -parseInt(spanY + Math.random() * 20); obj.left = parseInt(Math.random() * 980) + "px"; step = 1; } else { tmp = parseInt(step += 5); } obj.top = tmp + "px"; setTimeout("arr[" + N + "].run()", 16); } } } window.onload = function () { var test = document.getElementById("test"); for (var i = 0; i < 30; i++) { arr[i] = new creSpan(i, test); setTimeout("arr[" + i + "].run()", i * 100); } } </script> </body> </html>

运行代码

转载于:https://www.cnblogs.com/kuikui/archive/2012/07/02/2573852.html