JS组件开发---调色按钮

ACb0y 发布于2019-08-01 16:11 / 1587人阅读

摘要：下面是我用写调色按钮的整个过程首先我需要做的是一个调色按钮四个按钮依次代表颜色中的四个参数。代码有很大一部分可以复用的，也没有做优化。暂时先这样，有时间再修改

在学习到实践的过程中，我想应该需要有以下的步骤：
首先要有一个明确的目标，要分析实施的过程中以自身已有的知识水平有可能出现的问题，然后列出依次要解决的问题，再依照问题找答案，把问题都解决就可以出个测试版咯，当然，最后有能力可以做代码上的优化甚至性能优化方面的工作。
下面是我用javaScript写调色按钮的整个过程：

首先我需要做的是一个调色按钮：四个按钮依次代表颜色rgba中的四个参数。
需要思考的问题是：1、鼠标事件拖放dom元素 2、怎么控制拖动的dom元素只能水平拖动 3、怎么把元素的拖动转换成颜色值和透明度的改变

问题最终解决：
1、鼠标拖放dom元素需要用到onmousedown、onmousemove、onmouseup的鼠标事件（顺便提一下：onmousedown和mousedown的区别是onmousedown是js原生，而mousedown是封装了onmousedown方法的jQuery方法）
2、让子元素固定在父元素内移动即可控制子元素只在水平移动
3、通过拖动的占整个进度条的权重可以转换成对应的颜色值以及透明度值（详细情况看代码注释）

手敲一小时出来的代码和效果图
代码：





无标题文档





           
       
       R:0
    
    
    
       
       G:0
    
    
    
       
       B:0
    
    
    
       
       opacity:1(default)

下面是效果图：
R/G/B/A分别代表rgba的四个参数，其中透明度的默认值时1

主要完成了功能

最下面的是效果显示的div

本来想详细步骤完整地写出来，不过我想这个也不难，又耗费时间，所以草草收场。js代码有很大一部分可以复用的，也没有做优化。暂时先这样，有时间再修改

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50356.html

JS组件开发---调色按钮

摘要：下面是我用写调色按钮的整个过程首先我需要做的是一个调色按钮四个按钮依次代表颜色中的四个参数。代码有很大一部分可以复用的，也没有做优化。暂时先这样，有时间再修改在学习到实践的过程中，我想应该需要有以下的步骤：首先要有一个明确的目标，要分析实施的过程中以自身已有的知识水平有可能出现的问题，然后列出依次要解决的问题，再依照问题找答案，把问题都解决就可以出个测试版咯，当然，最后有能力可以...

mist14 2019-08-30 13:20 评论0 收藏0
JS组件开发---调色按钮

摘要：下面是我用写调色按钮的整个过程首先我需要做的是一个调色按钮四个按钮依次代表颜色中的四个参数。代码有很大一部分可以复用的，也没有做优化。暂时先这样，有时间再修改在学习到实践的过程中，我想应该需要有以下的步骤：首先要有一个明确的目标，要分析实施的过程中以自身已有的知识水平有可能出现的问题，然后列出依次要解决的问题，再依照问题找答案，把问题都解决就可以出个测试版咯，当然，最后有能力可以...

Cc_2011 2019-08-20 13:36 评论0 收藏0
创建可维护的设计规范（Living Style Guide）

摘要：创建可维护的设计规范为什么需要相信团队工作中，不管是前端还是设计师都有被视觉统一问题折磨过的美好经历。所以在这，我先略过视觉稿，直接来说如何创建一分灵活可维护的设计规范。创建可维护的设计规范（Living Style Guide）为什么需要 Style Guide 相信团队工作中，不管是前端还是设计师都有被视觉统一问题折磨过的美 (dan) 好 (teng) 经历。特别是在中大...

sutaking 2019-08-30 13:12 评论0 收藏0
【理解chrome开发者工具】 part1 编辑与调试

摘要：类似一个文本编辑器。显示请求瀑布流。基于平均水平的网络速度和设备性能作出的评估。方便开发者少用鼠标。而在面板中是打开具体文件。顾名思义，观察这个断点发生之前，被调用过的函数。在开发者工具的中，我们可以设置永久名单。简单复习各个面板 Elements 浏览DOM树，浏览样式。 Console 一个REPL。小技巧：在任何非Console面板中，按ESC可以调出一个小的Console...

Shisui 2019-08-23 18:01 评论0 收藏0