• 网页的雪花飘落效果


    前几天再编辑自己的网页时想到上次百度做炸鸡啤酒那个雪花飘落,于是有兴趣就在网络上找了一找,找到了没有凝视的源代码,于是自己就学习了一下,而且为代码加入上凝视和大家分享,源代码地址也已经贴出。凝视不知道是否正确,有问题大家能够留言。

    js部分
    (function(){
        function k(a, b, c) {
            if (a.addEventListener) a.addEventListener(b, c, false);
            else a.attachEvent && a.attachEvent("on" + b, c)
        }//加入监听事件函数
        function g(a) {
            if (typeof window.onload != "function") window.onload = a;
            else {
                var b = window.onload;
                window.onload = function() {
                    b();
                    a()
                }
            }
        }//页面载入时就能够进行绘制
        function h() {
            var a = {};
            for (type in {
                Top: "",
                Left: ""
            }) {
                var b = type == "Top" ? "Y": "X";
                if (typeof window["page" + b + "Offset"] != "undefined") a[type.toLowerCase()] = window["page" + b + "Offset"];
                else {
                    b = document.documentElement.clientHeight ? document.documentElement: document.body;
                    a[type.toLowerCase()] = b["scroll" + type]
                }
            }
            return a
        }//top为向下已经拖动的高度,left为向左已经拖动的宽度
        function l() {
            var a = document.body,
            b;
            if (window.innerHeight) b = window.innerHeight;
            else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
            else if (a && a.clientHeight) b = a.clientHeight;
            return b
        }//获取当前屏幕网页宽度
        function i(a) {
            this.parent = document.body;
            this.createEl(this.parent, a);
            this.size = Math.random() * 5 + 5;
            this.el.style.width = Math.round(this.size) + "px";
            this.el.style.height = Math.round(this.size) + "px";//img节点大小
            this.maxLeft = document.body.offsetWidth - this.size;//左边界
            this.maxTop = document.body.offsetHeight - this.size;//下边界
            this.left = Math.random() * this.maxLeft;//初始X轴
            this.top = h().top + 1;//初始Y轴
            this.angle = 1.4 + 0.2 * Math.random();//初始角度
            this.minAngle = 1.4;//摆动角度范围1.4pi~1.6pi
            this.maxAngle = 1.6;
            this.angleDelta = 0.01 * Math.random();//角度变动
            this.speed = 2 + Math.random()//移动速度,2~3不等
        }
        var j = false;
        g(function() {
            j = true
        });
        var f = true;
        window.createSnow = function(a, b) {
            if (j) {
                var c = [],
                m = setInterval(function() {
                    f && b > c.length && Math.random() < b * 0.0025 && c.push(new i(a)); //限定雪花数组大小
    				! f && !c.length && clearInterval(m);//条件符合,清除雪花
                    for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--) if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
                        c[d].remove();
                        c[d] = null;
                        c.splice(d, 1)//雪花超出底线,删除
                    } else {
                        c[d].move();//雪花移动
                        c[d].draw()//雪花绘制
                    }
                },
                40);//40ms一跳
                k(window, "scroll",
                function() {
                    for (var e = c.length - 1; e >= 0; e--) c[e].draw()
                })//监听滚动栏时间,滚动重绘
            } else g(function() {
                createSnow(a, b)
            })
        };
        window.removeSnow = function() {
            f = false
        };//移除雪花绘制
        i.prototype = {
            createEl: function(a, b) {
                this.el = document.createElement("img"); 	//加入img节点
                this.el.setAttribute("src", b + "snow" + Math.floor(Math.random() * 4) + ".gif");  	//设置雪花图片路径,种类为snow0~3随机
                this.el.style.position = "absolute";	//绝对的布局显示
                this.el.style.display = "block";	//将雪花定义为块级元素
                this.el.style.zIndex = "99999";	//在最前方显示
                this.parent.appendChild(this.el)	//加入节点
            },
            move: function() {
                if (this.angle < this.minAngle || this.angle > this.maxAngle) this.angleDelta = -this.angleDelta;//保证角度在1.4到1.6之间
                this.angle += this.angleDelta;//角度变换
                this.left += this.speed * Math.cos(this.angle * Math.PI);//x轴位移计算
                this.top -= this.speed * Math.sin(this.angle * Math.PI);//Y轴位移计算
                if (this.left < 0) this.left = this.maxLeft;	//边界判定,雪花过边界重还有一边界穿出
                else if (this.left > this.maxLeft) this.left = 0
            },
            draw: function() {
                this.el.style.top = Math.round(this.top) + "px";//定义纵轴位置
                this.el.style.left = Math.round(this.left) + "px"//定义横轴位置
            },
            remove: function() {
                this.parent.removeChild(this.el);//移除雪花元素
                this.parent = this.el = null
            }
        }
    })();
    

    在网页中加入:
    <script src="jsized.snow.min.js" type="text/javascript"></script>        
    <script>
        /**
         * This function takes 2 arguments
         * First is the path to the directory with snowflake images
         * Second is the maximum number of snowflakes, please do not
         * set this number above 60 as it will impact the performance
         */
        createSnow('', 60);
    </script>

    效果站点:http://hhteam.duapp.com/

    雪花图片已经贴出,右击另存为就可以


    源代码下载地址在回复中贴出

  • 相关阅读:
    ASM ClassReader failed to parse class file- probably due to a new Java class file version that isn't supported yet问题
    Git配置工作
    Git多人协作
    Git分支合并
    网络收藏夹
    莫道桑榆晚,为霞尚满天
    2021幼升小
    2020年07月28日10:36:36
    JAVA中如果用BigDecimal做除法
    mybatis
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/3826763.html
Copyright © 2020-2023  润新知