javascript - 使用 jquery 和 javascript 创建一个 Adob​​e 渐变选择器

Question

我想在 Javascript 和 jQuery 中创建一个类似 Adob​​e 渐变选择器的组件。我想使用 jQuery 渐变插件。有一个 div，左右有 2 个标记。当我点击 div 的边界时，这会自动添加一个标记，当我双击它时，它会打开一个 jQuery 颜色以选择一种颜色。此外，标记应该在主 div 上移动。请帮我举个例子。

Answer 1

在 JQuery UI 中检查 slider http://jqueryui.com/demos/slider/ (您可以修改小部件的代码以添加多个标记、更改样式以及在滑动元素上附加单击处理程序以打开颜色选择器)，CSS3 渐变 http://css-tricks.com/examples/CSS3Gradient/ (您可以使用 jquery 操作 css3 渐变)，颜色选择器插件 http://www.eyecon.ro/colorpicker/或 Farbtastic 颜色选择器 — http://acko.net/dev/farbtastic

如果您不想使用 JQuery UI 小部件 - 并从头开始 - 您可以创建

with position: relative; 并在其中 with position: absolute; 然后在javascrtip/jquery中添加live事件 mousedown/mouseup/mousemove 来处理用户拖动标记时的移动，并添加点击事件打开颜色选择器。

要处理添加新标记，您需要向 div 添加点击事件，只需添加新的跨度，您还需要从 div 中的位置插入渐变的函数，因此当用户单击从黑色到白色渐变的中心时，它会添加灰色标记(但是您还可以为标记添加默认颜色或从左侧或右侧的标记复制颜色)；

你可以把它打包到插件里，然后放到网上。

关于javascript - 使用 jquery 和 javascript 创建一个 Adob​​e 渐变选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3716318/