Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
xinyu198736

给网站加了个评注的功能，顿时觉得萌萌哒了

  •  2      
  •   xinyu198736 ·
    xinyu198736 · Dec 2, 2014 · 9050 views
    This topic created in 4354 days ago, the information mentioned may be changed or developed.
    观摩地址： http://www.html-js.com/article/2494

    今天下午突然蹦出个点子，想给专栏加一个任意点评的功能。这种点评不止是针对整个文章的评论，而是更有针对性的直接指出文章某个位置的问题或者讨论。

    于是，晚上跟朋友喝完烧酒吃完火锅回家后，开动。

    然后等大家都睡了的时候，新功能就这样上线了。

    基本的动效就是这样的，因为时间紧，各种粗暴：

    
    可以添加，也可以评论，新加标注的时候作者会收到一封邮件通知，所以也别太频繁的标注了哦。

    以下是几个效果，欢迎大家多多使用，这种标注方式真心很有用的。

     
  • 标注
  • 评注
  • 功能
    84 replies  •  2014-12-24 15:32:04 +08:00
    bengol
    bengol
    Dec 2, 2014
    1
    cool~
    welsmann
    welsmann
    Dec 2, 2014
    2
    图全部挂了
    x86
    x86
    Dec 2, 2014
    3
    评注功能默认关吧，我觉得看似很酷其实很不方便
    nomemo
    nomemo
    Dec 2, 2014
    4
    很吊

    推荐在旁边加个评论的时间轴，用于过滤评论
    learnshare
    learnshare
    Dec 2, 2014
    5
    像弹幕一样飘来飘去吧 >_<|||
    clino
    clino
    Dec 2, 2014
    6
    挺酷的
    挺像弹字幕的哈
    slax
    slax
    Dec 2, 2014
    7
    能做成wordpress插件吗？哈哈
    markmx
    markmx
    Dec 2, 2014
    8
    有点意思 不错的想法
    jiangzhouq
    jiangzhouq
    Dec 2, 2014
    9
    密集恐惧症。。。
    plprapper
    plprapper
    Dec 2, 2014
    10
    挡住内容了 ，这样不好吧。
    linkiosk
    linkiosk
    Dec 2, 2014
    11
    随意双击就能评论
    akfish
    akfish
    Dec 2, 2014
    12
    真巧，也给自己博客加了逐段标注，还没上线。

    有考虑不同版本文章之间的diff么，不然一改文章就错位，类似功能主要的难点也就是在处理diff上。
    lingyired
    lingyired
    Dec 2, 2014
    13
    cool 但。。

    不应该随意位置
    不应该占用左键点击
    ChanneW
    ChanneW
    Dec 2, 2014
    14
    赞
    xz
    xz
    Dec 2, 2014
    15
    就是在随意位置评论吗？
    Cee
    Cee
    Dec 2, 2014
    16
    Cool
    不占用鼠标左键就更好了
    S1ahs3r
    S1ahs3r
    Dec 2, 2014
    17
    改进下应该学学轻之国度在线版阅读那样批注.这样酷炫但不实用
    hansnow
    hansnow
    Dec 2, 2014
    18
    原来前端乱炖的站长是楼主呀~关注了一段时间了，很不错！
    wcp1231
    wcp1231
    Dec 2, 2014
    19
    让我想起这个 https://bearyboard.com/
    kimw
    kimw
    Dec 2, 2014
    20
    long long ago, there was a diigo.com...however gfw was not working at that time...

    话说，diigo我现在还在用。
    kimw
    kimw
    Dec 2, 2014
    21
    不过创意不错，真的很炫耶~
    xiaowudesign
    xiaowudesign
    Dec 2, 2014 via iPhone
    22
    来支持未来姐夫……
    xinyu198736
    xinyu198736
    OP
    Dec 2, 2014
    23
    @hansnow 谢谢亲（*＾3＾）
    xinyu198736
    xinyu198736
    OP
    Dec 2, 2014
    24
    昨晚突发奇想搞出来的，参考了一些网站，体验也有缺陷，亮出来大家看看批评下，会改进，哈哈（⌒▽⌒）
    feiyuanqiu
    feiyuanqiu
    Dec 2, 2014
    25
    使用了一下，感觉做成双击点评要好些
    GuangXiN
    GuangXiN
    Dec 2, 2014 via Android
    26
    千万不要双击触发，我最喜欢边读文章变点击标注读到哪里了
    hugsky
    hugsky
    Dec 2, 2014
    27
    很适合摄影站，对图片的点评
    sneezry
    sneezry
    Dec 2, 2014
    28
    楼主模仿bing的效果应该比较好 =D
    soruNis
    soruNis
    Dec 2, 2014
    29
    为什么突然之间都想加评注了，是因为 glose 和 豆瓣读书 吗？
    coolcfan
    coolcfan
    Dec 2, 2014
    30
    最早是在有妖气看到这样子的。
    RobberPhex
    RobberPhex
    Dec 2, 2014
    31
    弹幕都到技术站了么？这样真的很不正式。
    一般讨论一段的话不是引用吗？
    SamZeng
    SamZeng
    Dec 2, 2014
    32
    挡到内容了，我觉得 [Medium](http://medium.com) 那种挺好的。
    durrrr
    durrrr
    Dec 2, 2014
    33
    做成通用的浏览器扩展吧！像 diigo 那种。
    除了批注，把高亮、过滤、搜索都搞出来。
    soruNis
    soruNis
    Dec 2, 2014
    34
    想一下可能的竞品: medium, wired, glose, google doc, douban, duokan
    Edward
    Edward
    Dec 2, 2014 via iPhone
    35
    确实 medium 的模式要好一些。。

    @slax 已经有 WordPress 插件了，还有一款付费主题内置支持这玩意，很酷。。。
    geew
    geew
    Dec 2, 2014
    36
    能开源不
    ids
    ids
    Dec 2, 2014
    37
    @Edward 哪有？
    phyng
    phyng
    Dec 2, 2014
    38
    Cool，似乎可以像medium一样放在右侧不挡住内容，我最初觉得这种设计非常棒是在这个文档： http://djangobook.py3k.cn/2.0/chapter01/ 文档有不清楚的地方点开评论基本上有人讨论过了
    kmvan
    kmvan
    Dec 2, 2014
    39
    貌似我自己受不了这圆点，鸡皮疙瘩。。。
    aWangami
    aWangami
    Dec 2, 2014
    40
    看着有点。。。难受...
    能加一个一键隐藏的功能么
    Yannis1990
    Yannis1990
    Dec 3, 2014
    41
    https://redpen.io/ 原版再次，昨天才看见，楼主今天就出了，赞，求开源插件~
    discrete
    discrete
    Dec 3, 2014
    42
    同求Wordpress插件。
    paloalto
    paloalto
    Dec 3, 2014
    43
    风扇呼呼响，建议把 CSS 3 的 animation 换成简单的 gif，或者取消圆点标注的动画效果，用静止的小圆点。
    Mihuwa
    Mihuwa
    Dec 3, 2014 via iPhone
    44
    @Edward 同求wordpress插件和付费主题链接
    xiaogui
    xiaogui
    Dec 3, 2014
    45
    这东西还是小团队使用的吧，人多了，还不点满了。
    blue7wings
    blue7wings
    Dec 3, 2014
    46
    挺有意思的。。。
    Arrowing
    Arrowing
    Dec 3, 2014
    47
    昨天看了个网站就和楼主做的效果一模一样！难道是楼主的站？

    有意思，但是我不喜欢用！
    chizhong
    chizhong
    Dec 3, 2014
    48
    有意思的想法，像极了弹幕……估计以后的90后程序员会喜欢
    虽然我也是90后……
    ityao
    ityao
    Dec 3, 2014
    49
    倒是对文章里面的图点评会比较有意思
    minuo0day
    minuo0day
    Dec 3, 2014
    50
    不知道能不能做成v9的插件
    Twinkle
    Twinkle
    Dec 3, 2014
    51
    233 忍着没去添加 好玩
    maaakor
    maaakor
    Dec 3, 2014
    52
    要是鼠标移到上面才显示就更好了。。
    ryanyu104
    ryanyu104
    Dec 3, 2014
    53
    昨天还玩过 创意挺好 就是感觉不方便
    nowit
    nowit
    Dec 3, 2014
    54
    挺有意思的，建议如下改善会更好一点：

    1、评论点圈最好不要遮挡文字、图片，干扰阅读，尤其是以阅读为主的页面；
    2、控制点的数量与Style，不要让页面一瞬间就『长满了痘痘』(☞'ω')☞
    ooksm
    ooksm
    Dec 3, 2014
    55
    密集物恐惧症怎么办
    dddd1919
    dddd1919
    Dec 3, 2014
    56
    文字版的弹幕
    apirl
    apirl
    Dec 3, 2014
    57
    公司网站大量的文章苦于没有互动，之前和我们boss提过类似的想法，文字版弹幕，结果被古板的boss给否了，楼主能实现出来太赞了。。。修改下体验会更好，密集恐怖症看着确实心里发毛，而且挡住内容了。
    konakona
    konakona
    Dec 3, 2014
    58
    挺有意思的！不过密集了点……
    EXDestroyer
    EXDestroyer
    Dec 3, 2014
    59
    炫酷
    xinyu198736
    xinyu198736
    OP
    Dec 3, 2014
    60
    这个帖子是被刷了，通常的话体验不会是这样，哈哈，刷点点的会封号处理。

    细节体验的确需要优化。
    xinyu198736
    xinyu198736
    OP
    Dec 3, 2014
    61
    其实这个功能的最大作用就是：


    提高一下网站的活跃度，

    估计过一阵就要下掉了，因为没人用。。。
    laxapple
    laxapple
    Dec 3, 2014
    62
    静态弹幕
    karjarjam
    karjarjam
    Dec 3, 2014
    63
    看起来是很cool，不过随意位置确实有点挡内容。而且没有隐藏选项页有点干扰阅读
    个人觉得最好中间一栏是文章，两边空间放批注。反正一行文字也不是太长，指到特定一行也基本能指到批注批的是哪一段了。
    aaalzk
    aaalzk
    Dec 3, 2014
    64
    要是推广开来,淘宝或者HAO123还能用吗
    wiz001
    wiz001
    Dec 3, 2014
    65
    这个好像之前一个叫白板的东东
    baskice
    baskice
    Dec 3, 2014
    66
    这个好棒
    ldehai
    ldehai
    Dec 3, 2014
    67
    Medium有这个功能
    neutrino
    neutrino
    Dec 3, 2014
    68
    参考有妖气漫画等站点，目的在于“就是要挡住内容”来形成“独特的效果”更有意思。
    sammo
    sammo
    Dec 3, 2014
    69
    diigo 的网页评注有类似的功能，只对高级用户开放，于是发展成版聊
    saber000
    saber000
    Dec 3, 2014
    70
    本来想用标注把隐藏标注的label盖住的,没成功...
    metalbug
    metalbug
    Dec 3, 2014
    71
    代码发出来玩玩如果做成单个JS插件就更好了。
    Edward
    Edward
    Dec 3, 2014
    72
    @ids
    @Mihuwa

    https://upthemes.com/themes/largo/ 付费主题，配合得挺好。至于插件，好像还是免费的，在官方库里有应该，不过跟不同主题搭配有些累。。。
    xinyu198736
    xinyu198736
    OP
    Dec 3, 2014
    73
    这个帖子被大家玩坏了。。。
    Rorysky
    Rorysky
    Dec 3, 2014
    74
    类似参考 豆瓣阅读 或者 多看阅读 注释、评论的添加方式
    adeweb
    adeweb
    Dec 3, 2014
    75
    楼主有考虑过深度密集恐惧症的人的感受么，头皮发麻啊。
    klam
    klam
    Dec 3, 2014
    76
    鱼头牛逼
    openroc
    openroc
    Dec 4, 2014
    77
    打开后，CPU秒High~~~。 哈哈。。。
    cxl008
    cxl008
    Dec 4, 2014
    78
    好多麻子
    sunnykevin
    sunnykevin
    Dec 4, 2014
    79
    其实我想说，密集恐惧症患者看了会抓狂的~
    jinzhe
    jinzhe
    Dec 4, 2014
    80
    不太实用啊！感觉有点乱
    lamtin
    lamtin
    Dec 8, 2014
    81
    密集恐惧症患者路过...
    vicwutaojun
    vicwutaojun
    Dec 11, 2014
    82
    @akfish 正解。。欢迎了解 qudian.org
    clino
    clino
    Dec 18, 2014
    83
    楼主前端乱炖是挂了还是怎么了?
    504 Gateway Time-out
    nginx/1.0.15
    lansexinyu
    lansexinyu
    Dec 24, 2014
    84
    楼主，就我知道前端乱炖已经挂了好几次了，请问是什么情况，是什么问题？我看了下，服务器是阿里云的，应该不会这么容易挂吧！
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4874 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 380ms · UTC 08:29 · PVG 16:29 · LAX 00:29 · JFK 03:29
    ♥ Do have faith in what you're doing.