此功能来源于与JC大大交流开发知识库中的突发奇想。

功能描述

文章内标记评论

所有的标记评论将会在文章内体现。在文章内双击或者长按某个坐标点、那么就可以在此坐标内添加评论。而其他用户将可以在同样的位置、查看到此条评论了。

用户可以在任何位置进行标记评论。不受限制。

而如果某个坐标位置评论过多、则就以弹出滚动框的形式展示、谁的时间早谁在前面。

文章内弹幕动画显示

这是一个用户体验的思考。

一个很长的页面。总有大部分内容在屏幕之外。

只要某个标记点进入了屏幕内（懒加载、我已经实现了这个插件、根据元素判断）。

那么该位置所处的标记点、显示一个半透明的小圆点。评论将会淡出淡然、轻微从上往下滑一点的动画、展示1秒钟。

不影响用户正常观看。但是可以让用户知道这里是有标记的。

如果用户想持续观看该条标记。可以在没有消失的时候就点击。这样可以一直固定显示。点击空白区域自动关闭。

如果用户滑动速度超过了一定值。那么就不显示标记弹幕。因为速度快、显示了体验也很差。还会浪费性能。

整体动画设计

标记弹幕以淡出淡然从上往下轻微滑动大概30px的动画展示。

所有标记小圆点也均以淡出淡然的方式若隐若现。

手势实现

双击屏幕：查看目前文章所有的标记圆点。点击圆点即可查看评论。

再次双击屏幕：隐藏标记圆点。

长按屏幕1秒钟以上：在长按的位置获取坐标或者富文本length长度的位置。弹出一个输入标记评论的弹出框。

单击圆点：若隐若现显示标记弹幕的评论内容。

滑动屏幕：若隐若现的显示进入屏幕内的标记弹幕1秒钟。（这种用户体验会给人一种。因为一直下滑、一直都会有弹幕出现。这个文章有很多人都在参与讨论！！！

技术问题思考、

如何获取到正确的坐标位置？

介于各个屏幕尺寸不一样。所以肯定不能通过屏幕坐标的形式实现。

目前思考的方式是。长按获取该文字所在dom元素的具体位置、存储该文字在所有富文本内的index。以及改文字内容。

加载弹幕数据的时候。复原到该文字上、作为标记弹幕的坐标点。

但是有个问题。如果作者重新编辑了文章。那么此标记位置可能就不存在了吗？？？

我目前的解决方案是：

1、如果该文字不存在了、并且在那个index周边10个index单位都找不到同样的字。。那么就删除此标记。（所以说作者要谨慎改文章。发表前要谨慎发表。

2、如果该文字前面又多了几个字。那么就检索周边10个index单位是否有同样的字。如果有、则在此处显示、并且更新index。如果没有、则删除。（说明更改的内容太多。已经影响标记弹幕排版。

实现案例：

原文是：我是一个笨蛋笨蛋笨蛋笨蛋笨蛋！！！！！

我在第3个笨蛋的“笨”字写了个标记弹幕、index是9。

修改后的原文是：我我我我我我我我我我我我我我我我我我是一个笨蛋笨蛋笨蛋笨蛋笨蛋笨蛋！！！！！

那么重新检索index为9的字是“我”。明显不满足。而在此index前10个字和后面10个字都没有发现笨字。那么就删除此标记。如果在周边发现了“笨“字。那么就在此处标记、并且重新记录index。

所以说！

谨慎发文！！！

谨慎重复修改！！！！

尤其是热门文章。改一下就意味着标记弹幕会出现偏差。