一个简单的原生js取色效果

2024-05-20 04:30:23

效果图如上：

HTML和js代码如下：

<style>
       *{
           padding: 0;
           margin:0;
           list-style: none;
       }
       .colorPicker{
           width: 255px;
           width: 765px;
           margin:50px auto;
       }
       .colorBar{
           height: 30px;
           width: 255px;
           width: 765px;
           position: relative;
       }
       .red{
           width: 255px;
           height: 30px;
           position: absolute;
           top: 0;
           left: 0;
           background:linear-gradient(to right,rgb(255,0,0),rgb(196,129,129));
       }
       .black{
           width: 255px;
           height: 30px;
           position: absolute;
           top: 0;
           left: 255px;
           background:linear-gradient(to right,rgb(0,0,0),rgb(204,204,204));
       }
       .green{
           width: 255px;
           height: 30px;
           position: absolute;
           top: 0;
           left: 510px;
           background:linear-gradient(to right,rgb(0,255,0),rgb(181,243,181));
       }
       .colorSlider{
           /* width: 12px; */
           height: 54px;
           position: absolute;
           left: 50%;
           margin-left: -6px;
           top: -12px;
           z-index: 20;
           /*background-color: green;*/
       }
       .sliderTop{
           width: 0;
           height: 0;
           position: absolute;
           left: 0;
           top: 0;
           border-left:6px solid transparent;
           border-top:12px solid red;
           border-bottom:6px solid transparent;
           border-right:6px solid transparent;
       }
       .sliderBottom{
           width: 0;
           height: 0;
           position: absolute;
           left: 0;
           bottom: 0;
           border-left:6px solid transparent;
           border-top:6px solid transparent;
           border-bottom:12px solid red;
           border-right:6px solid transparent;
       }
       .colorShow{
           width: 253px;
           height: 100px;
           margin:20px auto 0 auto;
           border: 1px solid #000;
       }
       .showRGB{ text-align: center; display: block; }
       .flag{
           width: 1px;
           height: 80px;
           position: absolute;
           left: 50%;
           top: -22px;
           background-color: red;
       }
   </style>
</head>
<body>
   <div class="colorPicker">
       <div class="colorBar">
           <div class="red"></div>
           <div class="black"></div>
           <div class="green"></div>
           <div class="colorSlider">
               <div class="sliderTop"></div>
               <div class="sliderBottom"></div>
           </div>

       </div>
       <div class="colorShow"></div>
       <div class="showRGB"></div>
   </div>
   <script>
       function ColorPicker(parameter){
           this.colorPicker = parameter.colorPicker;
           this.colorShow = parameter.colorShow;
           this.showRGB = parameter.showRGB;
           this.colorSlider = parameter.colorSlider;
           this.colorArr = parameter.colorArr;
           this.cell = this.colorPicker.offsetWidth / this.colorArr.length;
       }
       ColorPicker.prototype = {
           init:function(){
               this.getRGB();
               return this;
           },
           move:function(){
               var that = this;
               this.colorSlider.onmousedown = function(e){
                   var startX = e.pageX - this.offsetLeft;
                   var startY = e.pageY - this.offsetTop;
                   document.onmousemove = function(e){
                       var endX = e.pageX - startX;
                       var endY = e.pageY -startY;
                       if(endX<=0){
                           endX = 0
                       }else if(endX>=this.colorPicker.offsetWidth){
                           endX = this.colorPicker.offsetWidth;
                       }

                       this.colorSlider.style.left = endX +"px";
                       let xx = this.colorSlider.offsetLeft + 6;
                       this.getRGB(xx);
                   }.bind(that)
               };
               this.colorSlider.onmouseup = document.onmouseup = function(){
                   document.onmousemove =null;
               };
           },
           getRGB:function(x){
               var X = x||this.colorSlider.offsetLeft,
                   index = (X/this.cell|0)>=this.colorArr.length ? this.colorArr.length -1 : (X/this.cell|0),
                   s = this.colorArr[index];
               var rc = s[0]-s[3],
                   gc = s[1]-s[4],
                   bc = s[2]-s[5];
               var r=s[0],g=s[1],b=s[2];
               rc>0 ? r-=parseInt((Math.abs(rc)/this.cell)*(X%this.cell)) : r+=parseInt((Math.abs(rc)/this.cell)*(X%this.cell));
               gc>0 ? g-=parseInt((Math.abs(gc)/this.cell)*(X%this.cell)) : g+=parseInt((Math.abs(gc)/this.cell)*(X%this.cell));
               bc>0 ? b-=parseInt((Math.abs(bc)/this.cell)*(X%this.cell)) : b+=parseInt((Math.abs(bc)/this.cell)*(X%this.cell));
               x?this.colorShow.style.backgroundColor = `rgb(${r},${g},${b})`:this.colorShow.style.backgroundColor = `rgb(${r+6},${g+6},${b+6})`;
               //this.showRGB.innerHTML=`${r}|${g}|${b}|${x%this.cell}`;
           }
       }
       new ColorPicker({
           colorPicker:document.querySelector('.colorBar'),
           colorShow:document.querySelector('.colorShow'),
           showRGB:document.querySelector('.showRGB'),
           colorSlider:document.querySelector(".colorSlider"),
           colorArr:[
               [255,0,0,196,129,129],
               [0,0,0,204,204,204],
               [0,255,0,181,243,181]
           ]
       }).init().move();

   </script>

一个简单的原生js取色效果相关推荐

Vue.js如何写一个简单的原生js模块，浏览器中的表现如何？
2019独角兽企业重金招聘Python工程师标准>>> 浏览器正在逐步的支持原生JavaScript模块.Safari和Chrome的最新版本已经支持它们了,Firefox和Edge ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
写一个简单的node.js项目
项目初始化: npm init -y express是基于node.js的web的http模块封装的更强大的框架 npm i express@4.17.1 跨域: npm i cors@2.8.5 数 ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
如何写一个简单的node.js C 扩展
node 是由 c 编写的,核心的 node 模块也都是由 c 代码来实现,所以同样 node 也开放了让使用者编写 c 扩展来实现一些操作的窗口. 如果大家对于 require 函数的描述还有印象的 ...
为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务
原文链接:https://github.com/nixzhu/dev-blog/blob/master/2014-04-21-write-a-simple-nodejs-mongodb-web-ser ...
再来一个小游戏——原生js逐句解释开发简易版别踩白块，附源码
芜湖!没想到上个做扫雷的阅读量这么高(激动) 先捞一下:做个小项目~纯原生JS手把手逐句解释写一个扫雷小游戏(附源码) 快看↑ 这次就做一个别踩白块吧哈哈哈哈哈最终版演示地址:钢琴块源码在最后!最 ...
一个简单的百度换肤效果
一个简单的换肤效果 html和css部分 JavaScript部分 html和css部分 <style>* {margin: 0;padding: 0;}body {background: ...

最新文章

热门文章