为你的typecho添加一个烟花点击特效

博主： admin
发布时间：2021 年 06 月 23 日
1164次浏览
暂无评论
4971字数
分类： Develop

为你的typecho添加一个烟花点击特效(适用于handsome主题)

代码如下

```js

function clickEffect() {
    let balls = [];
    let longPressed = false;
    let longPress;
    let multiplier = 0;
    let width, height;
    let origin;
    let normal;
    let ctx;
    const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
    const pointer = document.createElement("span");
    pointer.classList.add("pointer");
    document.body.appendChild(pointer);

if (canvas.getContext && window.addEventListener) {
        ctx = canvas.getContext("2d");
        updateSize();
        window.addEventListener('resize', updateSize, false);
        loop();
        window.addEventListener("mousedown", function(e) {
            pushBalls(randBetween(10, 20), e.clientX, e.clientY);
            document.body.classList.add("is-pressed");
            longPress = setTimeout(function() {
                document.body.classList.add("is-longpress");
                longPressed = true;
            }, 500);
        }, false);
        window.addEventListener("mouseup", function(e) {
            clearInterval(longPress);
            if (longPressed == true) {
                document.body.classList.remove("is-longpress");
                pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                longPressed = false;
            }
            document.body.classList.remove("is-pressed");
        }, false);
        window.addEventListener("mousemove", function(e) {
            let x = e.clientX;
            let y = e.clientY;
            pointer.style.top = y + "px";
            pointer.style.left = x + "px";
        }, false);
    } else {
        console.log("canvas or addEventListener is unsupported!");
    }

function pushBalls(count = 1, x = origin.x, y = origin.y) {
        for (let i = 0; i < count; i++) {
            balls.push(new Ball(x, y));
        }
    }

function randBetween(min, max) {
        return Math.floor(Math.random() * max) + min;
    }

然后跑到handsome后台找到 `自定义 JavaScript` 塞进去保存就可

最后修改：2021 年 06 月 23 日 09 : 41 AM

打赏，please！

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

chaos
抱歉打扰，仔细研究后解决问题，十分感谢!
chaos
请问完成后前端网址怎么查看？或者还要继续wrangler pu...
麻辣串
坚持更新

为你的typecho添加一个烟花点击特效

admin • 2021 年 06 月 23 日

为你的typecho添加一个烟花点击特效(适用于handsome主题)

代码如下

function pushBalls(count = 1, x = origin.x, y = origin.y) {
        for (let i = 0; i < count; i++) {
            balls.push(new Ball(x, y));
        }
    }

function randBetween(min, max) {
        return Math.floor(Math.random() * max) + min;
    }

然后跑到handsome后台找到 `自定义 JavaScript` 塞进去保存就可

为你的typecho添加一个烟花点击特效

发表评论取消回复

通过github action 部署 inkrss

Windows 下配置 WinMerge 作为 Git 的比对工具

为你的typecho添加一个烟花点击特效

畅宇 #1 一串「一年」 2021年度总结

为你的typecho添加一个烟花点击特效

畅宇 #1 一串「一年」 2021年度总结

Windows 下配置 WinMerge 作为 Git 的比对工具

通过github action 部署 inkrss

为你的typecho添加一个烟花点击特效

发表评论 取消回复

为你的typecho添加一个烟花点击特效

发表评论取消回复