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);
                    }
                }


    示例演示：
  • 相关阅读:
    剑指offer题目整理
    字符串编辑距离
    团体程序设计天梯赛 L3-010 是否完全二叉搜索树 (30分)
    团体程序设计天梯赛 L3-006 迎风一刀斩 (30分)（几何规律题）
    团体程序设计天梯赛 L3-005 垃圾箱分布 (30分)（Djikstra求最短路）
    团体程序设计天梯赛 L3-004 肿瘤诊断 (30分)（DFS）
    团体程序设计天梯赛 L3-003 社交集群 (30分)（并查集）
    团体程序设计天梯赛 L3-002 特殊堆栈 (30分)（树状数组+二分）
    团体程序设计天梯赛 L3-001 凑零钱 (30分)（0/1背包）
    团体程序设计天梯赛 L2-012 关于堆的判断 (25分)
  • 原文地址：https://www.cnblogs.com/kuikui/p/2573852.html
Copyright © 2011-2022 走看看