这个动图用前端如何还原实现？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2468 天前的主题，其中的信息可能已经有所发展或是发生改变。

动图用

还原

前端

实现

6 条回复 • 2017-07-21 11:00:51 +08:00

ipwx

2017-07-20 23:21:39 +08:00

三大前端库，Vue.js, React, AngularJS，随便选一个慢慢做呗。

只要有 two-way binding 或者类似机制，基本都能做。

Seymer

2017-07-20 23:33:00 +08:00

@ipwx 嗯嗯，这个貌似是用 bootstrap + js 做的，不知道这个颜色选择权是自带的还是插件，也不像是 type color。

zhlssg

2017-07-20 23:37:35 +08:00 via iPhone

监听 onchange 事件，替换下面的 input，不需要双向数据绑定吧

ChefIsAwesome

2017-07-21 00:10:08 +08:00 via Android

帮你分析下。选颜色那个分三部分（左边区域的 x，y，右边那长条的 y ），肯定是某种颜色格式的三个参数。这三个参数未必直接就是百分比，但是肯定能换算成百分比来表示。所以你就是找到这个颜色格式是怎样的，然后把左右两个区域的渐变给画出来，应该 css 的渐变就行。接着就是监听鼠标事件，把鼠标位置相当于区域位置的坐标百分比给算出来，带到颜色公式里，这就得到结果了。
至于怎么点击输入框弹出来选择器，怎么跟上头的类型选择联动，方法就多种多样了

cubesugar

2017-07-21 00:28:51 +08:00

hsv 色彩空间，[react-color]( https://github.com/casesandberg/react-color)

ipwx

2017-07-21 11:00:51 +08:00

@zhlssg 用框架、分组件，好写。用 jQuery + bootstrap 你会得到一团乱麻的改不动的代码。