web前端 | 顏色選擇器
阿新 • • 發佈：2022-03-06
web前端 | 顏色選擇器
參考：https://www.cnblogs.com/Grewer/p/8652078.html
程式碼：
<!DOCTYPE html> <!-- saved from url=(0044)https://grewer.github.io/JsDemo/colorPicker/ --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>colorPicker</title> <link rel="stylesheet" href="./colorPicker_files/colorPicker.css"> </head> <body> <div> <div id="chooseColor" style="background-color: rgb(255, 255, 255);"></div> <div id="pickBox" style="display: none;"> <div class="colorBox"> <div class="color" style="background-color: rgb(255, 0, 0);"> <div class="white"></div> <div class="black"></div> <div class="point" style="left: 0px; top: 0px;"> <div class="p"></div> </div> </div> <div class="colorSelect"> <div class="colorBar"></div> <div class="thumb bar"></div> </div> </div> <div class="transparency" style="background-color: rgb(255, 255, 255);"> <div class="transparencyBar"></div> <div class="thumb trans"></div> </div> <div class="operate"> <input autocomplete="off" class="rgbaText" type="text" value="rgba(255,255,255,1)"> <button id="confirm">確認</button> </div> </div> </div> <script src="./colorPicker_files/index.js"></script> </body></html>
#pickBox { width: 300px; height: 200px; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); background-color: #fff; padding: 6px; position: absolute; } .transparency { position: relative; width: 280px; height: 12px; } .color { position: relative; width: 280px; height: 150px; float: left; } .color .white { background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0)); position: absolute; width: 100%; height: 100%; } .color .black { background: linear-gradient(0deg, #000, transparent); position: absolute; width: 100%; height: 100%; } .colorSelect { width: 12px; height: 150px; float: right; position: relative; box-sizing: border-box; } .colorBar { background: linear-gradient(180deg, red 0, #ff0 17%, lime 33%, cyan 50%, blue 67%, #f0f 83%, red); height: 100%; } .colorBox { overflow: hidden; margin-bottom: 6px; } .colorSelect .thumb { position: absolute; left: 0; top: 0; width: 100%; height: 4px; box-sizing: border-box; border-radius: 1px; background: #fff; border: 1px solid #f0f0f0; box-shadow: 0 0 2px rgba(0, 0, 0, .6); z-index: 1; } .transparency .thumb { position: absolute; left: 0; top: 0; height: 100%; width: 4px; box-sizing: border-box; border-radius: 1px; background: #fff; border: 1px solid #f0f0f0; box-shadow: 0 0 2px rgba(0, 0, 0, .6); z-index: 1; } .color .point { position: absolute; } .color .point > div { width: 4px; height: 4px; box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4); border-radius: 50%; transform: translate(-2px, -2px); } .transparency .transparencyBar { background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff); height: 100%; } .operate input { float: left; font-size: 12px; height: 24px; margin: 0; box-sizing: border-box; outline: 0; } .operate { margin-top: 6px; text-align: right; } #pickBox button { margin: 0; font-size: 12px; line-height: 0; background-color: #fff; color: #333; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; outline: 0; width: 80px; text-align: center; -webkit-appearance: none; transition: .3s; } #pickBox button:hover { border-color: #51bbdd; color: #51bbdd; } #pickBox button:focus { border-color: #2c9edd; color: #2c9edd; } .operate button { height: 24px; } #chooseColor { width: 30px; height: 30px; border: 1px solid #999; margin: 5px; cursor: pointer; }
var pick, colorElement, chooseColor, colorPoint, colorBar, rgbaText, colorBarThumb, transparency, transparencyBar, transparencyThumb; chooseColor = document.getElementById('chooseColor'); //color長寬 var colorWidth, colorHeight, transparencyBarWidth; var pickBoxOffsetTop, pickBoxOffsetLeft; var init = function () { pick = document.getElementById('pickBox'); colorElement = pick.querySelector('.color'); colorPoint = pick.querySelector('.point'); colorBar = pick.querySelector('.colorBar'); rgbaText = pick.querySelector('.rgbaText'); colorBarThumb = pick.querySelector('.bar.thumb'); transparency = pick.querySelector('.transparency'); transparencyBar = pick.querySelector('.transparencyBar'); transparencyThumb = pick.querySelector('.transparency .thumb'); //color長寬 colorWidth = colorElement.clientWidth; colorHeight = colorElement.clientHeight; transparencyBarWidth = transparencyBar.clientWidth; pickBoxOffsetTop = pick.getBoundingClientRect().top; pickBoxOffsetLeft = pick.getBoundingClientRect().left; }; init(); var isMoveColor = false; var isMoveColorBar = false; var isMoveTransparency = false; var transparencyCache = 1; var changeColor = function (x, y) { if (x === void 0) { x = 0; } if (y === void 0) { y = 0; } var _a = rgbToObj(colorElement.style.backgroundColor), r = _a.r, g = _a.g, b = _a.b; //右上 RGB; var difference = { r: 255 - r, g: 255 - g, b: 255 - b }; var scaleX = x / colorWidth; scaleChange(difference, scaleX); var result = { r: 255 - difference.r, g: 255 - difference.g, b: 255 - difference.b }; var scaleY = y / colorHeight; scaleChange(result, 1 - scaleY); var RGBA = objToRGBA(result); chooseColor.style.backgroundColor = RGBA; rgbaText.value = RGBA; transparency.style.backgroundColor = objToRGB(result); }; var scaleChange = function (diff, scale) { for (var i in diff) { diff[i] = (scale * diff[i]) | 0; } }; var pxToNumber = function (px) { if (px === void 0) { px = '0px'; } return Number(px.slice(0, -2)); }; var objToRGBA = function (obj) { return "rgba(" + obj.r + "," + obj.g + "," + obj.b + "," + transparencyCache + ")"; }; var objToRGB = function (obj) { return "rgb(" + obj.r + "," + obj.g + "," + obj.b + ")"; }; var rgbToObj = function (rgbString) { var array = rgbString.split(','); return { r: Number(array[0].split('(')[1]), g: Number(array[1]), b: Number(array[2].slice(0, -1)) }; }; var colorBarRange = function (scale) { switch (true) { case scale < .17: return { rank: scale / .17, arr: [{ r: 255, g: 0, b: 0 }, { r: 255, g: 255, b: 0 }] }; case scale < .33: return { rank: (scale - .17) / .16, arr: [{ r: 255, g: 255, b: 0 }, { r: 0, g: 255, b: 0 }] }; case scale < .5: return { rank: (scale - .33) / .17, arr: [{ r: 0, g: 255, b: 0 }, { r: 0, g: 255, b: 255 }] }; case scale < .67: return { rank: (scale - .5) / .17, arr: [{ r: 0, g: 255, b: 255 }, { r: 0, g: 0, b: 255 }] }; case scale < .83: return { rank: (scale - .67) / .16, arr: [{ r: 0, g: 0, b: 255 }, { r: 255, g: 0, b: 255 }] }; default: return { rank: (scale - .83) / .17, arr: [{ r: 255, g: 0, b: 255 }, { r: 255, g: 0, b: 0 }] }; } }; var getTransparency = function (rank) { return Number((1 - rank / transparencyBarWidth).toFixed(2)); }; var changeColorBar = function (scale) { var range = colorBarRange(scale); var rangeArr = range.arr; var diff = { r: rangeArr[0].r - rangeArr[1].r, g: rangeArr[0].g - rangeArr[1].g, b: rangeArr[0].b - rangeArr[1].b }; var result = rangeArr[1]; for (var i in diff) { result[i] = result[i] + diff[i] * (1 - range.rank) | 0; } return result; }; var changeTransparency = function (x) { var transparency = getTransparency(x); transparencyThumb.style.left = x + 'px'; transparencyCache = transparency; var currentColor = rgbaText.value.split(','); currentColor.splice(currentColor.length - 1, 1, transparency + ')'); var changeTransparencyColor = currentColor.join(','); rgbaText.value = changeTransparencyColor; chooseColor.style.backgroundColor = changeTransparencyColor; }; pick.addEventListener('mousedown', function (ev) { var target = ev.target; switch (target.className) { case 'p': return isMoveColor = true; case 'point': return isMoveColor = true; case 'thumb bar': return isMoveColorBar = true; case 'thumb trans': return isMoveTransparency = true; } }, false); pick.addEventListener('click', function (ev) { var target = ev.target; var x = ev.offsetX, y = ev.offsetY; switch (target.className) { case 'colorBar': colorBarThumb.style.top = y + 'px'; var result = changeColorBar(y / colorHeight); colorElement.style.backgroundColor = objToRGB(result); return changeColor(pxToNumber(colorPoint.style.left), pxToNumber(colorPoint.style.top)); case 'black': colorPoint.style.left = x + 'px'; colorPoint.style.top = y + 'px'; return changeColor(x, y); case 'transparencyBar': return changeTransparency(x); } }, false); document.addEventListener('mousemove', function (ev) { var target = ev.target; var cx = ev.clientX + document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft, cy = ev.clientY + document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; switch (true) { case isMoveTransparency: if (target.className !== 'thumb trans') { var diffX = cx - pickBoxOffsetLeft - 7; if (diffX < 0) diffX = 0; if (diffX > transparencyBarWidth) diffX = transparencyBarWidth; changeTransparency(diffX); } return false; case isMoveColorBar: if (target.className !== 'thumb bar') { var diffY = cy - pickBoxOffsetTop - 7; if (diffY < 0) diffY = 0; if (diffY > colorHeight) diffY = colorHeight; colorBarThumb.style.top = diffY + 'px'; var result = changeColorBar(diffY / colorHeight); colorElement.style.backgroundColor = objToRGB(result); changeColor(pxToNumber(colorPoint.style.left), pxToNumber(colorPoint.style.top)); } return false; case isMoveColor: if (target.className !== 'p' && target.className !== 'point') { var diffX = cx - pickBoxOffsetLeft - 7, diffY = cy - pickBoxOffsetTop - 7; if (diffX < 0) diffX = 0; if (diffY < 0) diffY = 0; if (diffX > colorWidth) diffX = colorWidth; if (diffY > colorHeight) diffY = colorHeight; changeColor(diffX, diffY); colorPoint.style.left = diffX + 'px'; colorPoint.style.top = diffY + 'px'; } return false; } }, false); chooseColor.addEventListener('click', function () { pick.style.display = 'block'; init(); }, false); document.getElementById('confirm').addEventListener('click', function () { pick.style.display = 'none'; }); document.addEventListener('mouseup', function () { isMoveColor = false; isMoveColorBar = false; isMoveTransparency = false; }, false); //# sourceMappingURL=index.js.map
本文來自部落格園，作者：Mz1，轉載請註明原文連結：https://www.cnblogs.com/Mz1-rc/p/15971385.html
如果有問題可以在下方評論或者email:[email protected]