京东活动页设计思路： 如何实现有弹幕的活动页?

　　同一种京东店铺活动，每一个店铺的活动页面装修不一样，有的店铺别出心裁，在活动页面里面加入了弹幕元素，有一个很好的互动性，可以让卖家参与进来，看到这里是不是心痒痒呢，下面跟随发米哥小编一起去学习一下今天的操作吧!

　　一、弹幕模块概述

　　1、使用效果

　　1)概述

　　在京东店铺装修时使用弹幕模块，可以在前端实现主视觉上的弹幕区域为具有遮罩效果的浮层，用户可以打开和收起弹幕浮层，在弹幕浮层上有用户弹幕输入框，提供了文字颜色、颜文字选择功能，用户编辑好自己的弹幕内容后点击发射，即可看到发射成功动效，同时在弹幕区域看到自己的弹幕内容从右向左滚动播放

　　2)说明

　　a) 登录验证：不需要登录账号，即可以发送弹幕。

　　b) 弹幕播放的内容：由系统默认内容库(弹幕集)+ 用户自己输入的内容为全部展示内容。

　　c) 发送频率限制：不限制发送次数。

　　d) 一次发送内容最大长度：用户一次发送的弹幕内容不超过30个字符，达到30个字符后不可继续输入。

　　e) 用户发送的内容突出展示效果：外面加外框。

　　f) 颜文字(文本格式，非图片表情)：通过弹出下拉选择框进行选择，用户选择某个颜文字后添加到文本输入框的光标处。

　　g) 文字颜色：用户可以定义自己输入的弹幕颜色(包括输入的文字和添加的颜文字)，通过弹出下拉选择框(色板)进行选择。

　　h) 可否输入换行：不支持输入换行内容，输入的换行符也一律当做普通字符发送。

　　i) 鼠标交互：鼠标悬停该行弹幕停止滚动播放(移出后继续滚动)，点击带有链接的弹幕将在新页面打开对应的URL。

　　j) 浏览器支持：请使用较新版版的Google
chrome、火狐、360、IE等主流浏览器，IE请使用IE7.0以上版本以保证较好的弹幕播放效果。

　　2、使用权限

　　如果要在jshop进行活动装修时使用弹幕模块，首先需要联系jshop管理员开通弹幕管理权限，在开通权限后您登录jshop后台，会发现jshop后台左侧功能导航栏内的【运营服务】已经出现【弹幕管理】功能，点击【弹幕管理】您可以自己创建弹幕集、编辑弹幕集、编辑弹幕集内容和删除已创建的弹幕集，具体操作说明见后文。

　　二、弹幕模块的添加

　　在支持弹幕模块的主频道下的活动装修界面，可以添加弹幕模块，如图2所示：

　　说明：若要实现弹幕从浏览器右边界至左边界的滚动播放效果，则将弹幕模块置于通栏布局(100%)中

　　三、弹幕模块的配置

　　1、弹幕模块设置

　　添加弹幕模块后，点击【设置】按钮打开弹幕模块配置界面

　　a) 背景图片：添加的背景图片将作为弹幕遮罩浮层的底层背景，注意此背景图添加操作是可选项(非必须)。

　　b)
弹幕集ID：这里输入您在“【运营服务】–【弹幕管理】”中创建好的弹幕集ID，注意ID必须正确，如果输入的不是自己已创建的弹幕集ID，将提示活动创建者没有该弹幕集的权限。

　　2、弹幕管理

　　弹幕管理主要用于对弹幕模块所使用的系统弹幕集进行创建和编辑。

　　1)新增弹幕集

　　进入“【运营服务】–【弹幕管理】”后，点击【新增弹幕集】按钮，将出现图6所示的弹窗，这里可以输入弹幕集的名称和描述信息，点击【创建】后即可在下方的列表中看到刚才创建好的弹幕集，此时弹幕集ID自动生成(前面弹幕模块设置正是引用此ID)

　　2)编辑弹幕集

　　点击弹幕集列表右侧的【编辑】后，弹窗如图7，可以更改弹幕集名称和描述信息。

　　3)编辑弹幕集内容

　　点击弹幕集列表右侧的【编辑内容】后，如图

　　4)单条弹幕的编辑

　　在图8所示的界面，点击右上方的【新增弹幕】，就会在下方的列表增加一行，然后您可以输入该条弹幕的文本内容(必填)、跳转链接(非必填)，并可以为该条弹幕添加一个小图片(显示在该条弹幕文字的右侧，非必填操作);同时你可以逐条删除弹幕，也支持批量删除。

　　注意：

　　a) 埋点是无需用户操作的，由系统自动生成，点击【导出】下载的excel文件内每条弹幕的clsTag将自动添加。

　　b) 添加了跳转链接的弹幕，在前端展示时将出现下滑线。

　　5)上传弹幕集

　　支持通过excel文件导入弹幕集内容，点击【上传弹幕】后弹窗

　　说明：

　　a) 追加：选择追加模式，如用户先手动录入了2行，导入的excel的弹幕内容将从第三行开始展示，ID依次序排列。

　　b) 覆盖：选择覆盖模式，excel文件中的弹幕将覆盖之前展示的所右弹幕

　　c) 选择电脑文件：仅支持从excel文件导入弹幕集，

　　注意：

　　a)现在最多支持2000条的弹幕数据(即2000行);

　　b)excel文件的表头必须有内容、跳转链接、图片地址三项，即使所有行都没有链接和图片地址，表头也必须有跳转链接、图片地址字段，否则在上传弹幕文件时会解析出错。

　　导出

　　点击【导出】将下载生成了埋点clsTag的excel文件。

　　下载导入模板

　　点击【下载导入模板】将下载上传弹幕集excel文件的模板，供你参考。

　　搜索

　　搜索功能目前仅支持弹幕文本内容的关键字搜索，不支持弹幕的ID搜索。

　　最后，有一点很关键，就是不管是在上传完弹幕集之后，还是其他的任何编辑操作之后，都一定要进行【保存】，点击保存才可以让操作生效!更多精彩资讯，请持续关注发米哥网获取!