瞎逛逛发现一个神奇的网站 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Macv1994
V2EX    问与答

瞎逛逛发现一个神奇的网站

  •  3
     
  •   Macv1994 2021-03-09 08:58:36 +08:00 19329 次点击
    这是一个创建于 1677 天前的主题,其中的信息可能已经有所发展或是发生改变。

    http://koalastothemax.com/

    请问各位大佬这网站是怎么实现的呀?感觉好神奇~

    122 条回复    2021-03-23 17:00:35 +08:00
    1  2  
    Ritter
        1
    Ritter  
       2021-03-09 09:02:50 +08:00
    好玩
    endershadow
        2
    endershadow  
       2021-03-09 09:04:15 +08:00
    牛逼
    cslive
        3
    cslive  
       2021-03-09 09:04:24 +08:00
    挺好玩的,可以画画
    Leprax
        4
    Leprax  
       2021-03-09 09:04:30 +08:00
    密集恐惧症预警 强迫症预警
    cslive
        5
    cslive  
       2021-03-09 09:05:27 +08:00
    玩到最后才发现是个考拉
    Peterey
        6
    Peterey  
       2021-03-09 09:07:28 +08:00   3
    玩到一半发现是一只考拉,这个要是能自定义图片就超级牛逼了
    liufish
        7
    liufish  
       2021-03-09 09:12:10 +08:00
    理论上是不是所有的图片都可以做成这样
    sikariba
        8
    sikariba  
       2021-03-09 09:16:13 +08:00
    好神奇
    barrelsoil
        9
    barrelsoil  
       2021-03-09 09:17:29 +08:00
    可以自定义图片
    liyang5945
        10
    liyang5945  
       2021-03-09 09:18:03 +08:00
    NB,感觉可以用来做博客头像之类的
    kisshere
        11
    kisshere  
       2021-03-09 09:18:43 +08:00   3
    上次看见这个特效的时候,秦始皇还没统一六国吧,我记得当时是一个 js 特效下载的网站提供的 demo,最终形成的是一个蒙娜丽莎的像素图
    devwolf
        12
    devwolf  
       2021-03-09 09:20:08 +08:00
    仿佛刮刮乐,svg 可以这样玩的嘛,我也要学
    jfzhangak
        13
    jfzhangak  
       2021-03-09 09:24:32 +08:00
    强迫症慎入,不划出全图 ,不全部划开的话 心里难受
    Wood
        14
    Woood  
       2021-03-09 09:25:52 +08:00
    function basicLoad(location) {
    var possible = ['koalas', 'koalas1', 'koalas2', 'koalas3'];
    var file = 'img/' + possible[Math.floor(Math.random() * possible.length)] + '.jpg'
    return {
    file: file,
    shownFile: location.protocol + '//' + location.host + location.pathname + file
    };
    }
    替换代码,应该就可以
    zhaokun
        15
    zhaokun  
       2021-03-09 09:28:28 +08:00
    https://i.loli.net/2021/03/09/haw5zUltprf96Kj.png
    画到这地方卡住了,没反应
    Pogbag
        16
    Pogbag  
       2021-03-09 09:28:32 +08:00
    强迫症患者的福音
    Macv1994
        17
    Macv1994  
    OP
       2021-03-09 09:38:31 +08:00
    @Ritter
    @endershadow
    @cslive 哈哈哈哈 确实很好玩 我也玩了很久 就是想知道实现原理
    Macv1994
        18
    Macv1994  
    OP
       2021-03-09 09:38:53 +08:00
    @cslive
    @Peterey 这个应该是宣传保护考拉的网站
    Macv1994
        19
    Macv1994  
    OP
       2021-03-09 09:39:13 +08:00
    @sikariba
    @liyang5945
    @devwolf 是啊 我也感觉好神奇
    Macv1994
        20
    Macv1994  
    OP
       2021-03-09 09:39:32 +08:00
    @Leprax
    @jfzhangak
    @Pogbag 哈哈哈哈 我也是强迫症之一
    tutustream
        21
    tutustream  
       2021-03-09 09:40:51 +08:00
    都点完会跳出一个成就,大家加油!
    YAR
        22
    YAR  
       2021-03-09 09:42:35 +08:00
    我还以为自己乱画画出了一只考拉, 后来才发现是底图
    kop1989
        23
    kop1989  
       2021-03-09 09:46:26 +08:00
    copper20
        24
    copper20  
       2021-03-09 09:47:58 +08:00
    f12 可看源码
    Ginray
        25
    Ginray  
       2021-03-09 09:49:50 +08:00
    哈哈,把考拉的图换成妹子的 QQ 头像,高中的时候我就用过这招了
    chocovon
        26
    chocovon  
       2021-03-09 09:56:17 +08:00
    按现在的技术,应该可以配合机器识图,玩“你刮我猜”了
    imgbed
        27
    imgbed  
       2021-03-09 09:56:41 +08:00   1
    chiu
        28
    chiu  
       2021-03-09 10:09:49 +08:00
    考拉:你在看什么。。。
    HiShan
        29
    HiShan  
       2021-03-09 10:16:53 +08:00
    哈哈哈 有意思
    stephenxiaxy
        30
    stephenxiaxy  
       2021-03-09 10:18:07 +08:00
    好家伙
    zhangyangkam1
        31
    zhangyangkam1  
       2021-03-09 10:35:00 +08:00
    我记得之前碰到一个一样的网站,不过每次进去都是一张随机图片
    hugsky
        32
    hugsky  
       2021-03-09 10:35:06 +08:00
    验证码的新思路
    YulChigga
        33
    YulChigga  
       2021-03-09 10:36:45 +08:00
    @imgbed hhh
    Macv1994
        34
    Macv1994  
    OP
       2021-03-09 10:40:08 +08:00 via Android
    @HiShan 哈哈哈哈强迫症患者福音 摸鱼又多了一个站点
    itowei
        35
    itowei  
       2021-03-09 10:44:27 +08:00
    HTML 的网页特效,估计是作者展示特效用的
    ethusdt
        36
    ethusdt  
       2021-03-09 10:45:39+08:00   2


    我是有多无聊..

    M1 无压力
    KouShuiYu
        37
    KouShuiYu  
       2021-03-09 11:05:13 +08:00
    Phariel
        38
    Phariel  
       2021-03-09 11:10:30 +08:00 via iPhone
    牛逼 冬天可以用这个迅速暖手
    CallMeReznov
        39
    CallMeReznov  
       2021-03-09 11:11:50 +08:00
    爷回青,GGMM 们都再网上冲浪吗
    RealKela
        40
    RealKela  
       2021-03-09 11:17:39 +08:00
    浪费了我 10 分钟( ;)
    crab
        41
    crab  
       2021-03-09 11:28:13 +08:00
    @Peterey 底部不是可以输入图片链接吗
    lyqqqq
        42
    lyqqqq  
       2021-03-09 11:29:16 +08:00
    我以为刮完会提示你说 第 XXXX 名无聊的人。
    结果是自定义图片
    “Awesome stuff! Now make your own and share the link.
    Paste an image URL bellow and press enter.”
    rootmaster
        43
    rootmaster  
       2021-03-09 11:31:02 +08:00
    看来大家都是和我那么无聊,都这样搞出考拉
    icyalala
        44
    icyalala  
       2021-03-09 11:34:03 +08:00
    很早以前记得有个用 Adobe AIR 做的 iOS App 完全一致。。
    Ultraman
        45
    Ultraman  
       2021-03-09 11:38:03 +08:00 via Android
    看域名啊兄弟们,koala
    SbloodyS
        46
    SbloodyS  
       2021-03-09 11:38:44 +08:00
    好玩
    Macv1994
        47
    Macv1994  
    OP
       2021-03-09 11:44:32 +08:00
    @chiu 我在看这个强迫症长啥样 哈哈哈

    @Phariel 春天来了 冬天还会远吗?

    @RealKela 手速不行啊 大兄弟 hhh

    @SbloodyS 哈哈哈 看到各位玩的这么开心 我的分享才有意义

    @Ultraman 嗯 应该是个宣传考拉保护的网站吧
    Macv1994
        48
    Macv1994  
    OP
       2021-03-09 11:46:34 +08:00
    @crab 哪里啊 没看到呀
    Macv1994
        49
    Macv1994  
    OP
       2021-03-09 11:48:55 +08:00   1
    crab
        50
    crab  
       2021-03-09 11:53:35 +08:00
    @Macv1994 操作完一次后,下面就会出现一个图片链接输入框。
    1507265844
        51
    1507265844  
       2021-03-09 12:05:50 +08:00
    页面缩小狂甩鼠标,一分钟搞定 /doge
    18k
        52
    18k  
       2021-03-09 12:27:25 +08:00
    竟然是考拉 最后不应该是一条鱼吗 真摸鱼
    consul
        53
    consul  
       2021-03-09 12:30:08 +08:00
    还挺流畅
    Biwood
        54
    Biwood  
       2021-03-09 12:38:25 +08:00 via iPhone
    很多年前就有这效果了,用 D3.js ,页面底部有写
    ksedz
        55
    ksedz  
       2021-03-09 12:47:54 +08:00
    有刮刮乐的感觉
    JoJoJoJ
        56
    JoJoJoJ  
       2021-03-09 13:07:15 +08:00 via iPhone
    为啥我只看到个灰色圆圈,毫无互动
    Macv1994
        57
    Macv1994  
    OP
       2021-03-09 13:12:07 +08:00
    @JoJoJoJ 鼠标移到圆圈上
    ZRS
        58
    ZRS  
       2021-03-09 13:17:41 +08:00
    FieldYu
        59
    FieldYu  
       2021-03-09 13:28:23 +08:00
    orangeTop
        60
    orangeTop  
       2021-03-09 13:32:12 +08:00
    画多了 会卡
    learningman
        61
    learningman  
       2021-03-09 13:51:50 +08:00
    @Macv1994 居然没关 autoindex,有点离谱
    jfzhangak
        62
    jfzhangak  
       2021-03-09 13:59:17 +08:00
    @barrelsoil 怎么实现替换自己想要的图片呢
    gaigechunfeng
        63
    gaigechunfeng  
       2021-03-09 14:10:06 +08:00
    我还是第一次见到。很好玩收藏了。
    lizliz
        64
    lizliz  
       2021-03-09 14:14:20 +08:00
    CantSee
        65
    CantSee  
       2021-03-09 14:14:57 +08:00
    awolfly9
        66
    awolfly9  
       2021-03-09 14:21:49 +08:00
    借楼非前端问一下,这个项目要怎么启动呢?
    clone 项目后,直接点击 index 提示找不到 文件。

    Sorry, KoalsToTheMax could not load the image 'img/koalas1.jpg'
    phony2r
        67
    phony2r  
       2021-03-09 14:31:05 +08:00
    用 svg 的话 dom 节点太多, 一些配置不好的机器可能会卡, 还是 canvas 性能好
    onionKnight888
        68
    onionKnight888  
       2021-03-09 14:36:26 +08:00
    难受
    silencelixing
        69
    silencelixing  
       2021-03-09 14:48:51 +08:00
    有没有大佬,搞出来一个可以显示任意图片的版本?
    qdporter
        70
    qdporter  
       2021-03-09 14:49:39 +08:00
    @silencelixing 本身就可以
    Macv1994
        71
    Macv1994  
    OP
       2021-03-09 14:59:04 +08:00
    @silencelixing 现在就可以 不过你要先把一张图画完 下面才会显示出来
    coalo
        72
    coalo  
       2021-03-09 15:06:13 +08:00   1
    silencelixing
        73
    silencelixing  
       2021-03-09 15:07:01 +08:00
    @Macv1994 我画完了还是没有
    silencelixing
        74
    silencelixing  
       2021-03-09 15:07:30 +08:00
    @jiurenbudai 怎么操作,画完吗
    qiqi669
        75
    qiqi669  
       2021-03-09 15:08:32 +08:00
    @Leprax 啥强迫症预警,强迫症不会有任何不舒服。这个东西和强迫症没关系
    silencelixing
        76
    silencelixing  
       2021-03-09 15:08:54 +08:00
    @jiurenbudai
    @Macv1994
    还真可以,一个点都不能留,出现了!
    Leprax
        77
    Leprax  
       2021-03-09 15:13:27 +08:00
    @xuAN111 可不止我说强迫症呢
    qiqi669
        78
    qiqi669  
       2021-03-09 15:17:12 +08:00
    @Leprax 嗯,我指的是强迫症
    Geekerstar
        79
    Geekerstar  
       2021-03-09 15:21:54 +08:00
    我太牛逼了,随手一画就画了个考拉
    ppxppx
        80
    ppxppx  
       2021-03-09 15:23:28 +08:00 via Android
    @Peterey 全部画完就可以粘贴图片链接生成了
    xavierskip
        81
    xavierskip  
       2021-03-09 15:24:42 +08:00
    N 年前玩过的网站又被人挖出来了。。我记得是可以自定义图片的。划完后就有一个自定义图片 url 的地方出现了。
    zgs1983
        82
    zgs1983  
       2021-03-09 15:35:34 +08:00
    有点意思.
    Hoshinokozo
        83
    Hoshinokozo  
       2021-03-09 15:37:23 +08:00
    个人猜测,考拉图片是背景,圆圈更像是一个遮罩层。

    可以反过来想,先准备一张图片,在上面生成一个遮罩层,遮罩层的每个像素点一开始是透明的,然后用鼠标的滑动事件设定通过某种算法生成 4 个更大的圆圈,如此往复,形成最开始的样子
    jamme
        84
    jamme  
       2021-03-09 15:38:44 +08:00
    emmm...感觉类似于 MipMap~
    beanrobbie
        85
    beanrobbie  
       2021-03-09 15:40:06 +08:00
    哈哈,怎么都是考拉
    a0000
        86
    a0000  
       2021-03-09 15:48:01 +08:00 via Android
    @YAR 笑死我了。。233
    Macv1994
        87
    Macv1994  
    OP
       2021-03-09 15:49:45 +08:00 via Android
    @beanrobbie 看域名啊兄弟们,koala
    linhongye
        88
    linhongye  
       2021-03-09 15:59:05 +08:00 via Android
    池化
    Latin
        89
    Latin  
       2021-03-09 16:06:54 +08:00
    KouShuiYu
        90
    KouShuiYu  
       2021-03-09 16:26:28 +08:00
    KouShuiYu
        91
    KouShuiYu  
       2021-03-09 16:30:51 +08:00
    lvwzhen
        92
    lvwzhen  
       2021-03-09 16:37:52 +08:00
    这个古早网站有快十年了吧,记得上大学时就有了。
    用 「 http://koalastothemax.com/?image_url 」的格式可以访问其他图片。
    ganbuliao
        93
    ganbuliao  
       2021-03-09 16:38:13 +08:00
    用的 d3 做的特效啊
    fanjianhang
        94
    fanjianhang  
       2021-03-09 16:41:05 +08:00
    治好了我的鼠标手~
    adjusted
        95
    adjusted  
       2021-03-09 17:11:27 +08:00
    Molita
        96
    Molita  
       2021-03-09 17:35:51 +08:00
    fgk
        97
    fgk  
       2021-03-09 17:43:33 +08:00
    我的风扇
    GrayXu
        98
    GrayXu  
       2021-03-09 18:11:24 +08:00
    这不就是池化操作的反过程嘛
    hive
        99
    hive  
       2021-03-09 18:18:43 +08:00
    下方这个链接点进去好阴森啊,生怕有个戴着类似哥布林大鼻子面具的人跳出来
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1584 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 36ms UTC 16:28 PVG 00:28 LAX 09:28 JFK 12:28
    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