V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
GeekHub
zerision
V2EX  ›  分享创造

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

  •  
  •   zerision · 187 天前 · 4866 次点击
    这是一个创建于 187 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    zhouhua97
        1
    zhouhua97   187 天前
    看了,不错,支持鼓励一下。
    dovme
        2
    dovme   187 天前
    鼠标点击的特效请问怎么弄啊
    tiantangtianma
        3
    tiantangtianma   187 天前 via iPhone
    点赞 楼主厉害已加入收藏夹 顺便 B 站地址没看到啊
    zerision
        4
    zerision   187 天前
    影视的动漫是我 B 站的视频,没啥人看的
    zerision
        5
    zerision   187 天前
    @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
        6
    liqingcan   187 天前
    鼠标点击的特效请问怎么弄啊 +1
    zerision
        7
    zerision   187 天前
    @liqingcan js 代码发出来了
    star7th
        8
    star7th   187 天前
    一看这么花俏的肯定是小孩子
    star7th
        9
    star7th   187 天前
    我说的是鼠标特效
    liqingcan
        10
    liqingcan   187 天前
    @zerision 看到了。谢谢哈
    zerision
        11
    zerision   187 天前
    @star7th 看个人兴趣吧,有人喜欢有人不喜欢
    iRiven
        12
    iRiven   187 天前
    鼠标特效太夸张,技术内容的还是不要和动漫内容放在一起
    monkeydev
        13
    monkeydev   187 天前
    95 年居然自称老夫
    那我是不是应该称自己老朽了哈哈哈
    楼主棒棒哒
    windychen0
        14
    windychen0   187 天前
    随便点了个链接一看这么快,瞥了一眼我右上角的 VueDevtool 果然亮了[狗头]
    otakustay
        15
    otakustay   187 天前
    @monkeydev 不,我们是老不死
    monkeydev
        16
    monkeydev   187 天前
    @otakustay
    对对对,精神
    xdxtao
        17
    xdxtao   187 天前
    想问一下怎么把 B 站视频,嵌入网站呢?
    xiri
        18
    xiri   187 天前
    @xdxtao b 站你点分享会有嵌入地址
    qfdk
        19
    qfdk   187 天前
    首页的轮播图变形 头疼 左上角关了。。
    wangyuescr
        20
    wangyuescr   187 天前 via Android
    只想知道这个微屁恩体验如何
    zhw2590582
        21
    zhw2590582   187 天前
    轮播图变形,不过现在新手前端的配色都好生硬混搭
    Linon
        22
    Linon   187 天前 via Android
    手机感觉小卡
    dovme
        23
    dovme   187 天前
    @zerision #5 多谢大佬
    mathzhaoliang
        24
    mathzhaoliang   187 天前
    英语字体选择的不太好,建议换 robot, ovo, dejavu 之类的。而且英语字体应该和汉字之间有一点留白。

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

    最后文章干货可以再提高点。有什么内容是别处没有,只有你的网站上才能看到的吗?
    oneisall8955
        25
    oneisall8955   187 天前
    本人擅长 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 等系统的开关机
    xdxtao
        26
    xdxtao   187 天前
    @xiri 好的,知道了,谢谢
    hjsbs
        27
    hjsbs   187 天前
    https://mathgod.github.io/ 老夫的毕生所学也来了
    hjsbs
        28
    hjsbs   187 天前
    有些许卡
    xeylove
        29
    xeylove   187 天前
    可以,赞助了一个赞
    fxxwor99LVHTing
        30
    fxxwor99LVHTing   187 天前
    花里胡哨
    左下角的萝莉似曾相识,怎么发现好多人都喜欢这一套。。。。
    我是偏向简洁的
    所以。。。没有赞
    jason19659
        31
    jason19659   187 天前
    可以可以
    kjZsama
        32
    kjZsama   186 天前
    花里胡哨了 没必要的特效去掉感觉会好。
    Levio
        33
    Levio   186 天前
    感觉左下角的 动漫 canvas 挺骚的,咋整的
    dyxang
        34
    dyxang   186 天前 via Android
    dyxang
        35
    dyxang   186 天前 via Android
    另外 备案的网站 介绍梯子是不是有点……
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4379 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 01:36 · PVG 09:36 · LAX 18:36 · JFK 21:36
    ♥ Do have faith in what you're doing.