爱意满满的作品展示区。
zerision

老夫的毕生所学都在这里了

  •  
  •   zerision · Mar 25, 2020 · 8516 views
    This topic created in 2418 days ago, the information mentioned may be changed or developed.

    都在分享博客,我也来搞一个 网址:http://www.zerision.fun 只求 B 站点个赞!

    zhouhua97
    zhouhua97
    Mar 25, 2020
    1
    看了,不错,支持鼓励一下。
    dovme
    dovme
    Mar 25, 2020
    2
    鼠标点击的特效请问怎么弄啊
    tiantangtianma
    tiantangtianma
    Mar 25, 2020 via iPhone
    3
    点赞 楼主厉害已加入收藏夹 顺便 B 站地址没看到啊
    zerision
    zerision
    OP
    Mar 25, 2020
    4
    影视的动漫是我 B 站的视频,没啥人看的
    zerision
    zerision
    OP
    Mar 25, 2020
    5
    @dovme 代码:
    // Click Effect
    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 updateSize() {
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    ctx.scale(2, 2);
    width = (canvas.width = window.innerWidth);
    height = (canvas.height = window.innerHeight);
    origin = {
    x: width / 2,
    y: height / 2
    };
    normal = {
    x: width / 2,
    y: height / 2
    };
    }
    class Ball {
    constructor(x = origin.x, y = origin.y) {
    this.x = x;
    this.y = y;
    this.angle = Math.PI * 2 * Math.random();
    if (longPressed == true) {
    this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
    } else {
    this.multiplier = randBetween(6, 12);
    }
    this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
    this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
    this.r = randBetween(8, 12) + 3 * Math.random();
    this.color = colours[Math.floor(Math.random() * colours.length)];
    }
    update() {
    this.x += this.vx - normal.x;
    this.y += this.vy - normal.y;
    normal.x = -2 / window.innerWidth * Math.sin(this.angle);
    normal.y = -2 / window.innerHeight * Math.cos(this.angle);
    this.r -= 0.3;
    this.vx *= 0.9;
    this.vy *= 0.9;
    }
    }

    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;
    }

    function loop() {
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < balls.length; i++) {
    let b = balls[i];
    if (b.r < 0) continue;
    ctx.fillStyle = b.color;
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
    ctx.fill();
    b.update();
    }
    if (longPressed == true) {
    multiplier += 0.2;
    } else if (!longPressed && multiplier >= 0) {
    multiplier -= 0.4;
    }
    removeBall();
    requestAnimationFrame(loop);
    }

    function removeBall() {
    for (let i = 0; i < balls.length; i++) {
    let b = balls[i];
    if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
    balls.splice(i, 1);
    }
    }
    }
    }
    clickEffect()//调用
    // End Click Effect
    liqingcan
    liqingcan
    Mar 25, 2020
    6
    鼠标点击的特效请问怎么弄啊 +1
    zerision
    zerision
    OP
    Mar 25, 2020
    7
    @liqingcan js 代码发出来了
    star7th
    star7th
    Mar 25, 2020
    8
    一看这么花俏的肯定是小孩子
    star7th
    star7th
    Mar 25, 2020
    9
    我说的是鼠标特效
    liqingcan
    liqingcan
    Mar 25, 2020
    10
    @zerision 看到了。谢谢哈
    zerision
    zerision
    OP
    Mar 25, 2020
    11
    @star7th 看个人兴趣吧,有人喜欢有人不喜欢
    Erskine
    Erskine
    Mar 25, 2020
    12
    鼠标特效太夸张,技术内容的还是不要和动漫内容放在一起
    monkeydev
    monkeydev
    Mar 25, 2020
    13
    95 年居然自称老夫
    那我是不是应该称自己老朽了哈哈哈
    楼主棒棒哒
    windychen0
    windychen0
    Mar 25, 2020
    14
    随便点了个链接一看这么快,瞥了一眼我右上角的 VueDevtool 果然亮了[狗头]
    otakustay
    otakustay
    Mar 25, 2020
    15
    @monkeydev 不,我们是老不死
    monkeydev
    monkeydev
    Mar 25, 2020
    16
    @otakustay
    对对对,精神
    xkxy
    xkxy
    Mar 25, 2020
    17
    想问一下怎么把 B 站视频,嵌入网站呢?
    imkuang
    imkuang
    Mar 25, 2020
    18
    @xdxtao b 站你点分享会有嵌入地址
    qfdk
    qfdk
    PRO
    Mar 25, 2020
    19
    首页的轮播图变形 头疼 左上角关了。。
    wangyuescr
    wangyuescr
    Mar 25, 2020 via Android
    20
    只想知道这个微屁恩体验如何
    zhw2590582
    zhw2590582
    Mar 25, 2020
    21
    轮播图变形,不过现在新手前端的配色都好生硬混搭
    PingPong
    PingPong
    Mar 25, 2020 via Android
    22
    手机感觉小卡
    dovme
    dovme
    Mar 25, 2020
    23
    @zerision #5 多谢大佬
    mathzhaoliang
    mathzhaoliang
    Mar 25, 2020
    24
    英语字体选择的不太好,建议换 robot, ovo, dejavu 之类的。而且英语字体应该和汉字之间有一点留白。

    你的博客首页图片占了太大比重,喧宾夺主,文章标题不突出。对于读者来说,他最关心的是能不能一眼看到自己感兴趣的内容,而不是二次元之类的美图。

    最后文章干货可以再提高点。有什么内容是别处没有,只有你的网站上才能看到的吗?
    itechify
    itechify
    Mar 25, 2020
    25
    本人擅长 Ai 、Fw 、Br 、Ae 、Pr 、Id 、Ps 等软件的安装与卸载,精通 CSS 、JavaScript 、PHP 、C 、C++、C#、Java 、Ruby 、Perl 、Lisp 、Python 、Objective-C 、ActionScript 等单词的拼写,熟悉 Windows 、Linux 、MacOS 、IOS 、Android 等系统的开关机
    xkxy
    xkxy
    Mar 25, 2020
    26
    @xiri 好的,知道了,谢谢
    hjsbs
    hjsbs
    Mar 25, 2020
    27
    https://mathgod.github.io/ 老夫的毕生所学也来了
    hjsbs
    hjsbs
    Mar 25, 2020
    28
    有些许卡
    xeylove
    xeylove
    Mar 25, 2020
    29
    可以,赞助了一个赞
    fxxwor99LVHTing
    fxxwor99LVHTing
    Mar 25, 2020
    30
    花里胡哨
    左下角的萝莉似曾相识,怎么发现好多人都喜欢这一套。。。。
    我是偏向简洁的
    所以。。。没有赞
    jason19659
    jason19659
    Mar 25, 2020
    31
    可以可以
    kjZsama
    kjZsama
    Mar 26, 2020
    32
    花里胡哨了 没必要的特效去掉感觉会好。
    Levio
    Levio
    Mar 26, 2020
    33
    感觉左下角的 动漫 canvas 挺骚的,咋整的
    dyxang
    dyxang
    Mar 26, 2020 via Android
    34
    dyxang
    dyxang
    Mar 26, 2020 via Android
    35
    另外 备案的网站 介绍梯子是不是有点……
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1907 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 77ms · UTC 07:39 · PVG 15:39 · LAX 23:39 · JFK 02:39
    ♥ Do have faith in what you're doing.