WordPress

三种JS代码为WordPress网站添加雪花飘落效果

三种JS代码为WordPress网站添加雪花飘落效果-优次元

第一种:

复制以下代码至你的网站js里即可,替换图片链接!


<script type="text/javascript" language="javascript">(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}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";this.maxLeft = document.body.offsetWidth - this.size;this.maxTop = document.body.offsetHeight - this.size;this.left = Math.random() * this.maxLeft;this.top = h().top + 1;this.angle = 1.4 + 0.2 * Math.random();this.minAngle = 1.4;this.maxAngle = 1.6;this.angleDelta = 0.01 * Math.random();this.speed = 2 + Math.random()}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);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");this.el.setAttribute("src", b + "你的雪花图片");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;this.angle += this.angleDelta;this.left += this.speed * Math.cos(this.angle * Math.PI);this.top -= this.speed * Math.sin(this.angle * Math.PI);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}}})();createSnow("", 40);</script>

第二种:


<script type="text/javascript">
(function($){
   $.fn.snow = function(options){
   var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
   documentHeight     = $(document).height(),
   documentWidth  = $(document).width(),
   defaults = {
      minSize   : 10,
      maxSize   : 20,
      newOn     : 1000,
      flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
   },
   options = $.extend({}, defaults, options);
   var interval= setInterval( function(){
   var startPositionLeft = Math.random() * documentWidth - 100,
   startOpacity = 0.5 + Math.random(),
   sizeFlake = options.minSize + Math.random() * options.maxSize,
   endPositionTop = documentHeight - 200,
   endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
   durationFall = documentHeight * 10 + Math.random() * 5000;
   $flake.clone().appendTo('body').css({
      left: startPositionLeft,
      opacity: startOpacity,
      'font-size': sizeFlake,
      color: options.flakeColor
   }).animate({
      top: endPositionTop,
      left: endPositionLeft,
      opacity: 0.2
   },durationFall,'linear',function(){
        $(this).remove()
   });
   }, options.newOn);
    };
    })(jQuery);
$(function(){
    $.fn.snow({
       minSize: 5, /* 定义雪花最小尺寸 */
       maxSize: 50,/* 定义雪花最大尺寸 */
       newOn: 300  /* 定义密集程度,数字越小越密集 */
    });
});
</script>

第三种:


<script type="text/javascript">
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) { setTimeout(callback, 1000 / 60); };

    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function(){
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function() {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
        this.size = Math.random() * flakeSize + 2;          /* 形状 */
        this.maxSize = flakeSize;                           /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
        this.fallSpeed = fallSpeed;                         /* 坠落速度 */
        this.velY = this.speed;                             /* Y方向速度 */
        this.velX = 0;                                      /* X方向速度 */
        this.stepSize = Math.random() / 30;                 /* 步长 */
        this.step = 0                                       /* 步数 */
    }
    flakeMove.prototype.update = function() {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飞出边界的处理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function(width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状(此处可修改雪花颜色!!!)
    flakeMove.prototype.render = function(ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色,默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色,请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function() {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({maxFlake:60});
    snow.start();
</script>
使用方法:

方法①:复制其中一种JS代码,粘贴到网站标签之前即可;

方法②:去掉代码前后的script标签,然后将代码保存为js文件,在网站引用即可。

Ps:若没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可。

载入JQuery,载入百度提供的库


<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

历史上的今天:

(0)

本文由 优次元 作者:芈悦 发表,转载请注明来源!

关键词:,

热评文章

发表评论