zoukankan      html  css  js  c++  java
  • 雪花那个飘

     雪花那个飘
    “雪花”相对父容器绝对定位,向父容器中增加一片片“雪花”。
    创建“雪花”,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);
                        }
                    }


    示例演示:

  • 相关阅读:
    Rails http://poj.org/problem?id=1363
    表达式求值 http://acm.nyist.net/JudgeOnline/problem.php?pid=305
    精 挑 细 选 http://acm.nyist.net/JudgeOnline/problem.php?pid=263
    荷兰国旗问题 http://acm.nyist.net/JudgeOnline/problem.php?pid=268
    16进制的简单运算http://acm.nyist.net/JudgeOnline/problem.php?pid=244
    新浪博客中特殊字符不显示的问题
    C语言注释技巧
    c语言utf8转unicode
    [Linux]使用cat向同一个文件中写入多行
    大数据时代的数据价值_hadoop视频教程精品推荐
  • 原文地址:https://www.cnblogs.com/kuikui/p/2573852.html
Copyright © 2011-2022 走看看