网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js圣诞节雪花飘舞

关注我吧
 2013/12/17 11:57:59 阅读次数:2351

js圣诞节雪花飘舞

圣诞节快到了,虽然不是中国人的节日但还是提前祝大家圣诞节快乐。希望你们的“圣诞老人”会给你们送礼物!

今天在网上看到很多人说杭州也下雪了,好冷啊。广东这边也是阴雨天气,也开始冷了。朋友们注意保暖哦!

好了言归正传,js圣诞节雪花飘舞,改变鼠标的位置可以改变风的方向。你可以试下(demo)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下雪动画-鼠标的位置就是风向</title>
<style>
*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;}
body{background:#000 url(http://www.86y.org/DEMO/Xmas/happy-christmas.jpg) no-repeat center 0;}
.bottom{width:100%;height:38px;background:url(http://www.86y.org/DEMO/Xmas/footerbg.png) repeat-x 0 0;position:absolute;bottom:0;left:0;}


.color_shine{text-shadow:0 0 5px #fff;color:#ff0000;text-align:center;font-size: 3em;font-weight:bold;margin-top:15%;padding-top:-100px;}
</style>
</head>

<body>
<div class="color_shine">Merry Christmas</div>
<div class="bottom"></div>
<script>
var snowStorm = function(g, f) {
    function k(a, d) {
        isNaN(d) && (d = 0);
        return Math.random() * a + d
    }
    function x() {
        g.setTimeout(function() {
            a.start(!0)
        },
        20);
        a.events.remove(m ? f: g, "mousemove", x)
    }
    function y() { (!a.excludeMobile || !D) && x();
        a.events.remove(g, "load", y)
    }
    this.excludeMobile = this.autoStart = !0;
    this.flakesMax = 128;
    this.flakesMaxActive = 64;
    this.animationInterval = 33;
    this.useGPU = !0;
    this.className = null;
    this.excludeMobile = !0;
    this.flakeBottom = null;
    this.followMouse = !0;
    this.snowColor = "#fff";
    this.snowCharacter = "•";
    this.snowStick = !0;
    this.targetElement = null;
    this.useMeltEffect = !0;
    this.usePixelPosition = this.usePositionFixed = this.useTwinkleEffect = !1;
    this.freezeOnBlur = !0;
    this.flakeRightOffset = this.flakeLeftOffset = 0;
    this.flakeHeight = this.flakeWidth = 8;
    this.vMaxX = 5;
    this.vMaxY = 4;
    this.zIndex = 99;
    var a = this,
    q, m = navigator.userAgent.match(/msie/i),
    E = navigator.userAgent.match(/msie 6/i),
    D = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
    r = m && "BackCompat" === f.compatMode || E,
    h = null,
    n = null,
    l = null,
    p = null,
    s = null,
    z = null,
    A = null,
    v = 1,
    t = !1,
    w = !1,
    u;
    a: {
        try {
            f.createElement("div").style.opacity = "0.5"
        } catch(F) {
            u = !1;
            break a
        }
        u = !0
    }
    var B = !1,
    C = f.createDocumentFragment();
    q = function() {
        function c(b) {
            g.setTimeout(b, 1E3 / (a.animationInterval || 20))
        }
        function d(a) {
            return void 0 !== h.style[a] ? a: null
        }
        var e, b = g.requestAnimationFrame || g.webkitRequestAnimationFrame || g.mozRequestAnimationFrame || g.oRequestAnimationFrame || g.msRequestAnimationFrame || c;
        e = b ?
        function() {
            return b.apply(g, arguments)
        }: null;
        var h;
        h = f.createElement("div");
        e = {
            transform: {
                ie: d("-ms-transform"),
                moz: d("MozTransform"),
                opera: d("OTransform"),
                webkit: d("webkitTransform"),
                w3: d("transform"),
                prop: null
            },
            getAnimationFrame: e
        };
        e.transform.prop = e.transform.w3 || e.transform.moz || e.transform.webkit || e.transform.ie || e.transform.opera;
        h = null;
        return e
    } ();
    this.timer = null;
    this.flakes = [];
    this.active = this.disabled = !1;
    this.meltFrameCount = 20;
    this.meltFrames = [];
    this.setXY = function(c, d, e) {
        if (!c) return ! 1;
        a.usePixelPosition || w ? (c.style.left = d - a.flakeWidth + "px", c.style.top = e - a.flakeHeight + "px") : r ? (c.style.right = 100 - 100 * (d / h) + "%", c.style.top = Math.min(e, s - a.flakeHeight) + "px") : a.flakeBottom ? (c.style.right = 100 - 100 * (d / h) + "%", c.style.top = Math.min(e, s - a.flakeHeight) + "px") : (c.style.right = 100 - 100 * (d / h) + "%", c.style.bottom = 100 - 100 * (e / l) + "%")
    };
    this.events = function() {
        function a(c) {
            c = b.call(c);
            var d = c.length;
            e ? (c[1] = "on" + c[1], 3 < d && c.pop()) : 3 === d && c.push(!1);
            return c
        }
        function d(a, b) {
            var c = a.shift(),
            d = [f[b]];
            if (e) c[d](a[0], a[1]);
            else c[d].apply(c, a)
        }
        var e = !g.addEventListener && g.attachEvent,
        b = Array.prototype.slice,
        f = {
            add: e ? "attachEvent": "addEventListener",
            remove: e ? "detachEvent": "removeEventListener"
        };
        return {
            add: function() {
                d(a(arguments), "add")
            },
            remove: function() {
                d(a(arguments), "remove")
            }
        }
    } ();
    this.randomizeWind = function() {
        var c;
        c = k(a.vMaxX, 0.2);
        z = 1 === parseInt(k(2), 10) ? -1 * c: c;
        A = k(a.vMaxY, 0.2);
        if (this.flakes) for (c = 0; c < this.flakes.length; c++) this.flakes[c].active && this.flakes[c].setVelocities()
    };
    this.scrollHandler = function() {
        var c;
        p = a.flakeBottom ? 0 : parseInt(g.scrollY || f.documentElement.scrollTop || (r ? f.body.scrollTop: 0), 10);
        isNaN(p) && (p = 0);
        if (!t && !a.flakeBottom && a.flakes) for (c = 0; c < a.flakes.length; c++) 0 === a.flakes[c].active && a.flakes[c].stick()
    };
    this.resizeHandler = function() {
        g.innerWidth || g.innerHeight ? (h = g.innerWidth - 16 - a.flakeRightOffset, l = a.flakeBottom || g.innerHeight) : (h = (f.documentElement.clientWidth || f.body.clientWidth || f.body.scrollWidth) - (!m ? 8 : 0) - a.flakeRightOffset, l = a.flakeBottom || f.documentElement.clientHeight || f.body.clientHeight || f.body.scrollHeight);
        s = f.body.offsetHeight;
        n = parseInt(h / 2, 10)
    };
    this.resizeHandlerAlt = function() {
        h = a.targetElement.offsetWidth - a.flakeRightOffset;
        l = a.flakeBottom || a.targetElement.offsetHeight;
        n = parseInt(h / 2, 10);
        s = f.body.offsetHeight
    };
    this.freeze = function() {
        if (a.disabled) return ! 1;
        a.disabled = 1;
        a.timer = null
    };
    this.resume = function() {
        if (a.disabled) a.disabled = 0;
        else return ! 1;
        a.timerInit()
    };
    this.toggleSnow = function() {
        a.flakes.length ? (a.active = !a.active, a.active ? (a.show(), a.resume()) : (a.stop(), a.freeze())) : a.start()
    };
    this.stop = function() {
        var c;
        this.freeze();
        for (c = 0; c < this.flakes.length; c++) this.flakes[c].o.style.display = "none";
        a.events.remove(g, "scroll", a.scrollHandler);
        a.events.remove(g, "resize", a.resizeHandler);
        a.freezeOnBlur && (m ? (a.events.remove(f, "focusout", a.freeze), a.events.remove(f, "focusin", a.resume)) : (a.events.remove(g, "blur", a.freeze), a.events.remove(g, "focus", a.resume)))
    };
    this.show = function() {
        var a;
        for (a = 0; a < this.flakes.length; a++) this.flakes[a].o.style.display = "block"
    };
    this.SnowFlake = function(c, d, e) {
        var b = this;
        this.type = c;
        this.x = d || parseInt(k(h - 20), 10);
        this.y = !isNaN(e) ? e: -k(l) - 12;
        this.vY = this.vX = null;
        this.vAmpTypes = [1, 1.2, 1.4, 1.6, 1.8];
        this.vAmp = this.vAmpTypes[this.type] || 1;
        this.melting = !1;
        this.meltFrameCount = a.meltFrameCount;
        this.meltFrames = a.meltFrames;
        this.twinkleFrame = this.meltFrame = 0;
        this.active = 1;
        this.fontSize = 10 + 10 * (this.type / 5);
        this.o = f.createElement("div");
        this.o.innerHTML = a.snowCharacter;
        a.className && this.o.setAttribute("class", a.className);
        this.o.style.color = a.snowColor;
        this.o.style.position = t ? "fixed": "absolute";
        a.useGPU && q.transform.prop && (this.o.style[q.transform.prop] = "translate3d(0px, 0px, 0px)");
        this.o.style.width = a.flakeWidth + "px";
        this.o.style.height = a.flakeHeight + "px";
        this.o.style.fontFamily = "arial,verdana";
        this.o.style.cursor = "default";
        this.o.style.overflow = "hidden";
        this.o.style.fontWeight = "normal";
        this.o.style.zIndex = a.zIndex;
        C.appendChild(this.o);
        this.refresh = function() {
            if (isNaN(b.x) || isNaN(b.y)) return ! 1;
            a.setXY(b.o, b.x, b.y)
        };
        this.stick = function() {
            r || a.targetElement !== f.documentElement && a.targetElement !== f.body ? b.o.style.top = l + p - a.flakeHeight + "px": a.flakeBottom ? b.o.style.top = a.flakeBottom + "px": (b.o.style.display = "none", b.o.style.bottom = "0%", b.o.style.position = "fixed", b.o.style.display = "block")
        };
        this.vCheck = function() {
            0 <= b.vX && 0.2 > b.vX ? b.vX = 0.2 : 0 > b.vX && -0.2 < b.vX && (b.vX = -0.2);
            0 <= b.vY && 0.2 > b.vY && (b.vY = 0.2)
        };
        this.move = function() {
            var c = b.vX * v;
            b.x += c;
            b.y += b.vY * b.vAmp;
            b.x >= h || h - b.x < a.flakeWidth ? b.x = 0 : 0 > c && b.x - a.flakeLeftOffset < -a.flakeWidth && (b.x = h - a.flakeWidth - 1);
            b.refresh();
            l + p - b.y + a.flakeHeight < a.flakeHeight ? (b.active = 0, a.snowStick ? b.stick() : b.recycle()) : (a.useMeltEffect && (b.active && 3 > b.type && !b.melting && 0.998 < Math.random()) && (b.melting = !0, b.melt()), a.useTwinkleEffect && (0 > b.twinkleFrame ? 0.97 < Math.random() && (b.twinkleFrame = parseInt(8 * Math.random(), 10)) : (b.twinkleFrame--, u ? b.o.style.opacity = b.twinkleFrame && 0 === b.twinkleFrame % 2 ? 0 : 1 : b.o.style.visibility = b.twinkleFrame && 0 === b.twinkleFrame % 2 ? "hidden": "visible")))
        };
        this.animate = function() {
            b.move()
        };
        this.setVelocities = function() {
            b.vX = z + k(0.12 * a.vMaxX, 0.1);
            b.vY = A + k(0.12 * a.vMaxY, 0.1)
        };
        this.setOpacity = function(a, b) {
            if (!u) return ! 1;
            a.style.opacity = b
        };
        this.melt = function() { ! a.useMeltEffect || !b.melting ? b.recycle() : b.meltFrame < b.meltFrameCount ? (b.setOpacity(b.o, b.meltFrames[b.meltFrame]), b.o.style.fontSize = b.fontSize - b.fontSize * (b.meltFrame / b.meltFrameCount) + "px", b.o.style.lineHeight = a.flakeHeight + 2 + 0.75 * a.flakeHeight * (b.meltFrame / b.meltFrameCount) + "px", b.meltFrame++) : b.recycle()
        };
        this.recycle = function() {
            b.o.style.display = "none";
            b.o.style.position = t ? "fixed": "absolute";
            b.o.style.bottom = "auto";
            b.setVelocities();
            b.vCheck();
            b.meltFrame = 0;
            b.melting = !1;
            b.setOpacity(b.o, 1);
            b.o.style.padding = "0px";
            b.o.style.margin = "0px";
            b.o.style.fontSize = b.fontSize + "px";
            b.o.style.lineHeight = a.flakeHeight + 2 + "px";
            b.o.style.textAlign = "center";
            b.o.style.verticalAlign = "baseline";
            b.x = parseInt(k(h - a.flakeWidth - 20), 10);
            b.y = parseInt( - 1 * k(l), 10) - a.flakeHeight;
            b.refresh();
            b.o.style.display = "block";
            b.active = 1
        };
        this.recycle();
        this.refresh()
    };
    this.snow = function() {
        var c = 0,
        d = null,
        e, d = 0;
        for (e = a.flakes.length; d < e; d++) 1 === a.flakes[d].active && (a.flakes[d].move(), c++),
        a.flakes[d].melting && a.flakes[d].melt();
        c < a.flakesMaxActive && (d = a.flakes[parseInt(k(a.flakes.length), 10)], 0 === d.active && (d.melting = !0));
        a.timer && q.getAnimationFrame(a.snow)
    };
    this.mouseMove = function(c) {
        if (!a.followMouse) return ! 0;
        c = parseInt(c.clientX, 10);
        c < n ? v = -2 + 2 * (c / n) : (c -= n, v = 2 * (c / n))
    };
    this.createSnow = function(c, d) {
        var e;
        for (e = 0; e < c; e++) if (a.flakes[a.flakes.length] = new a.SnowFlake(parseInt(k(6), 10)), d || e > a.flakesMaxActive) a.flakes[a.flakes.length - 1].active = -1;
        a.targetElement.appendChild(C)
    };
    this.timerInit = function() {
        a.timer = !0;
        a.snow()
    };
    this.init = function() {
        var c;
        for (c = 0; c < a.meltFrameCount; c++) a.meltFrames.push(1 - c / a.meltFrameCount);
        a.randomizeWind();
        a.createSnow(a.flakesMax);
        a.events.add(g, "resize", a.resizeHandler);
        a.events.add(g, "scroll", a.scrollHandler);
        a.freezeOnBlur && (m ? (a.events.add(f, "focusout", a.freeze), a.events.add(f, "focusin", a.resume)) : (a.events.add(g, "blur", a.freeze), a.events.add(g, "focus", a.resume)));
        a.resizeHandler();
        a.scrollHandler();
        a.followMouse && a.events.add(m ? f: g, "mousemove", a.mouseMove);
        a.animationInterval = Math.max(20, a.animationInterval);
        a.timerInit()
    };
    this.start = function(c) {
        if (B) {
            if (c) return ! 0
        } else B = !0;
        if ("string" === typeof a.targetElement && (c = a.targetElement, a.targetElement = f.getElementById(c), !a.targetElement)) throw Error('Snowstorm: Unable to get targetElement "' + c + '"');
        a.targetElement || (a.targetElement = f.body || f.documentElement);
        a.targetElement !== f.documentElement && a.targetElement !== f.body && (a.resizeHandler = a.resizeHandlerAlt, a.usePixelPosition = !0);
        a.resizeHandler();
        a.usePositionFixed = a.usePositionFixed && !r && !a.flakeBottom;
        if (g.getComputedStyle) try {
            w = "relative" === g.getComputedStyle(a.targetElement, null).getPropertyValue("position")
        } catch(d) {
            w = !1
        }
        t = a.usePositionFixed;
        h && (l && !a.disabled) && (a.init(), a.active = !0)
    };
    a.autoStart && a.events.add(g, "load", y, !1);
    return this
} (window, document);
</script>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭