老夫的毕生所学都在这里了 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zerision
V2EX    分享创造

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

  •  
  •   zerision 2020-03-25 15:10:02 +08:00 7406 次点击
    这是一个创建于 2027 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    最后文章干货可以再提高点。有什么内容是别处没有,只有你的网站上才能看到的吗?
    itechify
        25
    itechify  
    PRO
       2020-03-25 19:10:51 +08:00
    本人擅长 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
        26
    xkxy  
       2020-03-25 19:22:47 +08:00
    @xiri 好的,知道了,谢谢
    hjsbs
        27
    hjsbs  
       2020-03-25 19:49:25 +08:00
    https://mathgod.github.io/ 老夫的毕生所学也来了
    hjsbs
        28
    hjsbs  
       2020-03-25 19:51:10 +08:00
    有些许卡
    xeylove
        29
    xeylove  
       2020-03-25 22:34:12 +08:00
    可以,赞助了一个赞
    fxxwor99LVHTing
        30
    fxxwor99LVHTing  
       2020-03-25 22:56:18 +08:00
    花里胡哨
    左下角的萝莉似曾相识,怎么发现好多人都喜欢这一套。。。。
    我是偏向简洁的
    所以。。。没有赞
    jason19659
        31
    jason19659  
       2020-03-25 23:05:00 +08:00
    可以可以
    kjZsama
        32
    kjZsama  
       2020-03-26 10:56:48 +08:00
    花里胡哨了 没必要的特效去掉感觉会好。
    Levio
        33
    Levio  
       2020-03-26 10:59:13 +08:00
    感觉左下角的 动漫 canvas 挺骚的,咋整的
    dyxang
        34
    dyxang  
       2020-03-26 13:40:02 +08:00 via Android
    dyxang
        35
    dyxang  
       2020-03-26 13:49:54 +08:00 via Android
    另外 备案的网站 介绍梯子是不是有点……
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2340 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 15:52 PVG 23:52 LAX 08:52 JFK 11:52
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86