马上过年了给Z-blog博客添加飘雪特效教程

站长

发表文章数:4324

热门标签

首页 » 网站资源 » Z-blog » 正文

新的一年又即将开始了,你喜欢的妹纸追到了嘛,今天下班看到一些博客有飘雪特效,于是博主就参考了下顺便分享咯!

找到主题模板根目录下的底部文件footer.php 在适当位置加入以下代码

ps:如果你使用的是宁静致远主题模板可以在后台→主题配置→广告设置把以下代码复制粘贴进去即可

<script src="//网址域名/xue.js" defer></script><div class="snow"><canvas id="snow"></canvas></div>

下一步到主机根目录创建个js文件,并命名为xue.js如图:

马上过年了给Z-blog博客添加飘雪特效教程

创建好了复制以下代码进去xue.js文件里面

js代码:

 JavaScript
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;})();(function() {
    var flakes = [],
        canvas = document.getElementById("snow"), //画布ID,与上一步创建的画布对应
        ctx = canvas.getContext("2d"),
        flakeCount = 200,  //雪花数量,数值越大雪花数量越多
        mX = -100,
        mY = -100;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i],
                x = mX,
                y = mY,
                minDist = 150,  //雪花距离鼠标指针的最小值,小于这个距离的雪花将受到鼠标的排斥
                x2 = flake.x,
                y2 = flake.y;
            var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                dx = x2 - x,
                dy = y2 - y;
            if (dist < minDist) {
                var force = minDist / (dist * dist),
                    xcomp = (x - x2) / dist,
                    ycomp = (y - y2) / dist,
                    deltaV = force / 2;
                flake.velX -= deltaV * xcomp;
                flake.velY -= deltaV * ycomp;
            } else {
                flake.velX *= .98;
                if (flake.velY <= flake.speed) {
                    flake.velY = flake.speed                }
                flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
            }
            ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";  //雪花颜色
            flake.y += flake.velY;
            flake.x += flake.velX;
            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }
            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }
            ctx.beginPath();
            ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(snow);
    };
    function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width);
        flake.y = 0;
        flake.size = (Math.random() * 3) + 3;  //加号后面的值,雪花大小,为基准值,数值越大雪花越大
        flake.speed = (Math.random() * 1) + 0.5;  //加号后面的值,雪花速度,为基准值,数值越大雪花速度越快
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值,为基准值,范围0~1
    }
    function init() {
        for (var i = 0; i < flakeCount; i++) {
            var x = Math.floor(Math.random() * canvas.width),
                y = Math.floor(Math.random() * canvas.height),
                size = (Math.random() * 3) + 3,  //加号后面的值,雪花大小,为基准值,数值越大雪花越大
                speed = (Math.random() * 1) + 0.5,  //加号后面的值,雪花速度,为基准值,数值越大雪花速度越快
                opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值,为基准值,范围0~1
            flakes.push({
                speed: speed,
                velY: speed,
                velX: 0,
                x: x,
                y: y,
                size: size,
                stepSize: (Math.random()) / 30 * 1,  //乘号后面的值,雪花横移幅度,为基准值,数值越大雪花横移幅度越大,0为竖直下落
                step: 0,
                angle: 180,
                opacity: opacity            });
        }
        snow();
    };
    document.addEventListener("mousemove", function(e) {
        mX = e.clientX,
        mY = e.clientY    });
    window.addEventListener("resize", function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
    init();})();

下一步就是css代码,复制以下css代码到模板全局css文件里也可以放到footer.php里面,或其他主题设置自定

义css

马上过年了给Z-blog博客添加飘雪特效教程

css代码

 CSS
.snow {
    display: block;}#snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;}

然后在后台首页清除缓存即可

标签:

未经允许不得转载作者:站长, 转载或复制请以 超链接形式 并注明出处 xss云之家,资源网,娱乐网,网络技术资源分享平台
原文地址:《马上过年了给Z-blog博客添加飘雪特效教程》 发布于2020-12-27

分享到:
赞(0) 打赏 生成海报

相关推荐

  • 暂无文章

评论 2

8 + 2 =
  1. #1

    然而zblog现在可以安装 添加自定义CSS 添加自定义js两个插件来实现。。虽然我也想问为什么不写成一个插件/doge

    沉冰浮水4周前 (12-28)回复
  2. #2

    复制了,一直就想要这个雪花呢,太应景了

    招投标2周前 (01-12)回复

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

投稿赚钱
2020年在家赚取零花钱
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册