V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Macv1994
V2EX  ›  问与答

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

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

    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
    强迫症慎入,不划出全图 ,不全部划开的话 心里难受
    Woood
        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 的网页特效,估计是作者展示特效用的
    FaiChou
        36
    FaiChou  
       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
    有没有大佬,搞出来一个可以显示任意图片的版本?
    jiurenbudai
        70
    jiurenbudai  
       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 怎么操作,画完吗
    xuAN111
        75
    xuAN111  
       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 可不止我说强迫症呢
    xuAN111
        78
    xuAN111  
       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
    这不就是池化操作的反过程嘛
    lbyo
        99
    lbyo  
       2021-03-09 18:18:43 +08:00
    下方这个链接点进去好阴森啊,生怕有个戴着类似哥布林大鼻子面具的人跳出来
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2931 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 13:25 · PVG 21:25 · LAX 05:25 · JFK 08:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.