原生JS使用DIV模式开发的调色盘（代码教程）
程序员文章站
2022-07-06 07:51:56
直接上代码：
/**
* 调色盘
* create by j.y.du
*/
var du = {};
du.yue = {};
du.yue.palettetop = fu...
直接上代码：
/**
* 调色盘
* create by j.y.du
*/
var du = {};
du.yue = {};
du.yue.palettetop = function()
{
// vo
var _palettetop = this;
var _paletteutil = du.yue.paletteutil;
var _palettedom = new du.yue.palettedom();
var _paletteevent = new du.yue.paletteevent();
// datavo
var _start = false,_mode = 0,_classname = "my-palette";// mode:0-p模式 1-canvas模式
var _palettedomvo = {},_huedomvo = {},_transparentdomvo = {};// 初始化存放1w个div 彩虹条 透明度条
var _currentvo = {};// target:当前点击的input，rgb:当前颜色，hsv，hex
var _typelabel = "hex";
// dom
var _outdiv,_paletteoutdiv,_palettecirclediv,_paletteshowdiv;
var _midoutdiv,_midshowdiv,_midbaroutdiv,_midbarhueoutdiv,_midbarhueeventdiv,_midbarhuecirclediv,_midbarhuediv,_midbartransoutdiv,_midbartranseventdiv,_midbartranscirclediv,_midbartransdiv;;
var _bottomoutdiv,_bottominputoutdiv,_bottomlabeldiv,_bottominputdiv,_bottomhexinput,_bottomchangediv,_bottomchangespan,_bottomrinput,_bottomginput,_bottombinput,_bottomainput;
var _activedom;// 被选中的p
/**
* 初始化方法
*/
_init();
/**
* 对外方法
*/
object.defineproperties(this, {
debugdata : { writable : false, value : function(dataname) { return eval(dataname); } },
start : { writable : false, value : function(mode, classname) { _start = true; classname && (_classname = classname); _mode = (mode == 1 1 : 0); eval("_startmode_" + _mode).call(); } },
finish : { writable : false, value : function() { _start = false; } }
});
/**
* 内部方法
*/
// 初始化
function _init()
{
// 给doc绑定鼠标按下事件
document.addeventlistener("mousedown", function(){ _paletteevent.docmousedownevent.apply(this, [_start, _classname, _outdiv, _setcolor]); });
}
// 执行事件绑定方法
function _fire()
{
if(_currentvo.target)
{
_currentvo.target.setattribute("disabled", "disabled");
_currentvo.target.style["background-color"] = _currentvo.target.value;
_currentvo.target.style["text-indent"] = "-999px";
_paletteutil.event.fire(_currentvo.target, "change");
}
}
// 启动0模式
function _startmode_0()
{
// 创建1w个p
_palettedomvo = _palettedom.getpalettedomvo();
// 创建彩虹条
_huedomvo = _palettedom.gethuedomvo();
// 创建透明度条
_transparentdomvo = _palettedom.gettransparentdomvo();
// 组装弹框
eval("_packagedialogdiv_"+_mode).call();
// 放置色盘p
for(var x = 100;x>=0;x--)
{
for(var y = 100;y>=0;y--)
{
var key = y + "-" + x;
_paletteshowdiv.appendchild(_palettedomvo[key]);
}
}
// 放置彩虹条
for(var a = 0;a<=360;a++)
{
_midbarhuediv.appendchild(_huedomvo[a]);
}
// 放置透明条
for(var a = 0;a<=100;a++)
{
_midbartransdiv.appendchild(_transparentdomvo[a]);
}
// 绑定事件
eval("_bindevent_"+_mode).call();
}
// 组装弹框
function _packagedialogdiv_0()
{
_outdiv = _palettedom.getoutdiv();
// 顶部
_paletteoutdiv = _palettedom.getpaletteoutdiv();
_outdiv.appendchild(_paletteoutdiv);
// 色盘选择圆圈
_palettecirclediv = _palettedom.getpalettecirclediv();
_paletteoutdiv.appendchild(_palettecirclediv);
// 色盘
_paletteshowdiv = _palettedom.getpaletteshowdiv();
_paletteoutdiv.appendchild(_paletteshowdiv);
// 中部
_midoutdiv = _palettedom.getmidoutdiv();
_outdiv.appendchild(_midoutdiv);
// 色卡
_midshowdiv = _palettedom.getmidshowdiv();
_midoutdiv.appendchild(_midshowdiv);
_midbaroutdiv = _palettedom.getmidbaroutdiv();
_midoutdiv.appendchild(_midbaroutdiv);
_midbarhueoutdiv = _palettedom.getmidbarhueoutdiv();
_midbaroutdiv.appendchild(_midbarhueoutdiv);
// 彩虹条外框包围，只为事件
_midbarhueeventdiv = _palettedom.getmidbarhuediv();
_midbarhueoutdiv.appendchild(_midbarhueeventdiv);
_midbarhuecirclediv = _palettedom.getmidbarcirclediv();
_midbarhueeventdiv.appendchild(_midbarhuecirclediv);
_midbarhuediv = _palettedom.getmidbarhuediv();
_midbarhueeventdiv.appendchild(_midbarhuediv);
_midbartransoutdiv = _palettedom.getmidbarhueoutdiv();
_midbaroutdiv.appendchild(_midbartransoutdiv);
// 透明条外框包围，只为事件
_midbartranseventdiv = _palettedom.getmidbarhuediv();
_midbartransoutdiv.appendchild(_midbartranseventdiv);
_midbartranscirclediv = _palettedom.getmidbarcirclediv();
_midbartranseventdiv.appendchild(_midbartranscirclediv);
_midbartransdiv = _palettedom.getmidbarhuediv();
_midbartranseventdiv.appendchild(_midbartransdiv);
// 底部
_bottomoutdiv = _palettedom.getbottomoutdiv();
_outdiv.appendchild(_bottomoutdiv);
_bottominputoutdiv = _palettedom.getbottominputoutdiv();
_bottomoutdiv.appendchild(_bottominputoutdiv);
_bottomlabeldiv = _palettedom.getbottomlabeldiv();
_bottominputoutdiv.appendchild(_bottomlabeldiv);
_bottominputdiv = _palettedom.getbottominputdiv();
_bottominputoutdiv.appendchild(_bottominputdiv);
_bottomhexinput = _palettedom.getbottomhexinput();
_bottominputdiv.appendchild(_bottomhexinput);
_bottomchangediv = _palettedom.getbottomchangediv();
_bottomoutdiv.appendchild(_bottomchangediv);
_bottomchangespan = _palettedom.getbottomchangespan();
_bottomchangediv.appendchild(_bottomchangespan);
_bottomrinput = _palettedom.getbottomrgbinput();
_bottomginput = _palettedom.getbottomrgbinput();
_bottombinput = _palettedom.getbottomrgbinput();
_bottomainput = _palettedom.getbottomrgbinput();
// 单控
_bottomainput.setattribute("maxlength", "4");
}
// 绑定事件
function _bindevent_0()
{
// 最外框阻止冒泡
_outdiv.addeventlistener("mousedown", function(){ _paletteevent.outdivmousedownevent.apply(this); });
// 色盘区域 单击，移动事件
_paletteoutdiv.addeventlistener("mousedown", function(){ _paletteevent.paletteoutdivmousedownevent.apply(this, [_selectbypalette]); });
_paletteoutdiv.addeventlistener("mousemove", function(){ _paletteevent.paletteoutdivmousemoveevent.apply(this, [_selectbypalette]); });
document.addeventlistener("mouseup", function(){ _paletteevent.docmouseupevent.apply(this); });
document.addeventlistener("mousemove", function(){ _paletteevent.docmousemoveevent.apply(this); });
// 彩虹条 单击 移动事件
_midbarhueeventdiv.addeventlistener("mousedown", function(){ _paletteevent.midbarhueoutdivmousedownevent.apply(this, [_selectbyhue]); });
_midbarhueeventdiv.addeventlistener("mousemove", function(){ _paletteevent.midbarhueoutdivmousemoveevent.apply(this, [_selectbyhue]); });
// 透明条 单击 移动事件
_midbartranseventdiv.addeventlistener("mousedown", function(){ _paletteevent.midbartranseventdivmousedownevent.apply(this, [_selectbytrans]); });
_midbartranseventdiv.addeventlistener("mousemove", function(){ _paletteevent.midbartranseventdivmousemoveevent.apply(this, [_selectbytrans]); });
// >> 切换事件
_bottomchangespan.addeventlistener("click", function(){ _paletteevent.bottomchangespanclickevent.apply(this, [_changebottomtype]); });
// hex oninput事件
_bottomhexinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottomrinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottomginput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottombinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottomainput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
}
// 设置颜色
function _setcolor()
{
_currentvo["target"] = this;
_setcolordetail(this.value);
_setbottominfo();
}
// 设置颜色详细
function _setcolordetail(value)
{
_getcurrentvo(value);
_setpalette();
_setpaletteposition();
_setmidshowcolor();
_setmidhueposition();
_setmidtransposition();
}
// 获取当前颜色rgb,hex,hsv和活动dom
function _getcurrentvo(value)
{
var rgb = [];
if(value && value.touppercase().substring(0,1) == "#")
{
rgb = _paletteutil.color.hextorgb(value);
}else if(value && value.touppercase().substring(0,3) == "rgb")
{
var _rgbarray = _paletteutil.color.rgbtoarray(value);
var hex = _paletteutil.color.rgbtohex(_rgbarray);
rgb = _paletteutil.color.hextorgb("#"+hex);
}else
{
rgb = [255, 255, 255, 1];
}
var hex = _paletteutil.color.rgbtohex(rgb);
var hsv = _paletteutil.color.rgbtohsv(rgb.slice(0,3));
var s = math.round(hsv[1]);
var v = math.round(hsv[2]);
_activedom = _palettedomvo[s + "-" + v];
_currentvo["rgb"] = rgb;
_currentvo["hex"] = hex;
_currentvo["hsv"] = hsv;
}
// 设置色盘
function _setpalette()
{
var hsv = _currentvo["hsv"];
var h = math.round(hsv[0]);
for(var x = 100;x>=0;x--)
{
for(var y = 100;y>=0;y--)
{
var _rgb = _paletteutil.color.hsvtorgb([h, y, x]);
var p = _palettedomvo[y + "-" + x];
p.style["top"] = ((100 - x) * 1.8) + "px";
p.style["left"] = (y * 2.4) + "px";
p.style["background-color"] = "rgb("+_rgb[0]+","+_rgb[1]+","+_rgb[2]+")";
}
}
}
// 设置色盘选择器位置
function _setpaletteposition()
{
var left = _activedom.style["left"].replace("px","");
var top = _activedom.style["top"].replace("px","");
_palettecirclediv.style["top"] = (number(top) + 0.9 - 6) + "px";
_palettecirclediv.style["left"] = (number(left) + 1.2 - 6) + "px";
}
// 设置显示区域颜色
function _setmidshowcolor()
{
_midshowdiv.style["background-color"] = "#" + _currentvo["hex"];
}
// 设置彩虹条的位置
function _setmidhueposition()
{
var hsv = _currentvo["hsv"];
var h = math.round(hsv[0]);
// 获取彩虹条的doms
var huedom = _huedomvo[h];
var left = huedom.style["left"].replace("px","");
_midbarhuecirclediv.style["left"] = (left - 9) + "px";
}
// 设置透明度条的位置
function _setmidtransposition()
{
var a = _currentvo["rgb"][3];
a == undefined && (a = 1);
var avalue = math.round(a * 100);
// 获取透明度dom ,
var transdom = _transparentdomvo[avalue];
var left = transdom.style["left"].replace("px","");
_midbartranscirclediv.style["left"] = (left - 9) + "px";
}
// 设置底部信息
function _setbottominfo()
{
_bottominputdiv.innerhtml = "";
_bottomlabeldiv.innerhtml = _typelabel;
if(_typelabel == "hex")
{
_bottomhexinput.value = "#" + _currentvo["hex"];
_bottominputdiv.appendchild(_bottomhexinput);
}else
{
_bottomrinput.value = _currentvo["rgb"][0];
_bottomginput.value = _currentvo["rgb"][1];
_bottombinput.value = _currentvo["rgb"][2];
_bottomainput.value = _currentvo["rgb"][3];
_bottominputdiv.appendchild(_bottomrinput);
_bottominputdiv.appendchild(document.createtextnode(" - "));
_bottominputdiv.appendchild(_bottomginput);
_bottominputdiv.appendchild(document.createtextnode(" - "));
_bottominputdiv.appendchild(_bottombinput);
_bottominputdiv.appendchild(document.createtextnode(" - "));
_bottominputdiv.appendchild(_bottomainput);
}
}
// 色盘选择
function _selectbypalette(s, v)
{
// 边缘溢出调整
s < 0 && (s = 0);
s > 100 && (s = 100);
v < 0 && (v = 0);
v > 100 && (v = 100);
// 设置活动dom
_activedom = _palettedomvo[s + "-" + v];
var rgb = _activedom.style["background-color"];
var newrgb = _paletteutil.color.rgbtoarray(rgb);
// 替换透明度
newrgb[3] = _currentvo.rgb[3];
_currentvo.rgb = newrgb;
// 设置圆圈位置
_setpaletteposition();
// 设置底部信息
_currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);
_setbottominfo();
// 设置色卡颜色
_setmidshowcolor();
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 彩虹条选择
function _selectbyhue(h)
{
h < 0 && (h = 0);
h > 360 && (h = 360);
var hsv = _paletteutil.color.rgbtohsv(_currentvo.rgb.slice(0,3));
// 保留透明度
var a = _currentvo.rgb[3];
// 替换h 生成新的色盘
hsv[0] = h;
_currentvo.hsv = hsv;
_setpalette();
_setmidhueposition();
// 生成新的rgb,hex
_currentvo.rgb = _paletteutil.color.hsvtorgb(hsv);
_currentvo.rgb.push(a);
_currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);
// 设置色卡颜色和底部信息
_setmidshowcolor();
_setbottominfo();
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 透明度选择
function _selectbytrans(a)
{
a < 0 && (a = 0);
a > 100 && (a = 100);
_currentvo.rgb[3] = number(a / 100).tofixed(2);
_currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);
_setmidtransposition();
// 设置色卡颜色和底部信息
_setmidshowcolor();
_setbottominfo();
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// hex输入
function _bottominput()
{
var value = "";
if(_typelabel == "hex")
{
value = _bottomhexinput.value;
}else
{
value = "rgb("+_bottomrinput.value+","+_bottomginput.value+","+_bottombinput.value+","+_bottomainput.value+")";
}
_setcolordetail(value);
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 切换显示类型
function _changebottomtype()
{
_typelabel = (_typelabel == "hex") "rgba" : "hex";
_setbottominfo();
}
}
/**
* 事件类
*/
du.yue.paletteevent = function()
{
var _paletteutil = du.yue.paletteutil;
var _palettedragvo = {};// 色盘drag对象
var _huedragvo = {};// 彩虹条drag对象
var _transdragvo = {};// 透明条drag对象
// 对外暴露接口
object.defineproperties(this, {
docmousedownevent : { writable : false, value : _docmousedownevent },
outdivmousedownevent : { writable : false, value : _outdivmousedownevent },
paletteoutdivmousedownevent : { writable : false, value : _paletteoutdivmousedownevent },
paletteoutdivmousemoveevent : { writable : false, value : _paletteoutdivmousemoveevent },
docmouseupevent : { writable : false, value : _docmouseupevent },
docmousemoveevent : { writable : false, value : _docmousemoveevent },
midbarhueoutdivmousedownevent : { writable : false, value : _midbarhueoutdivmousedownevent },
midbarhueoutdivmousemoveevent : { writable : false, value : _midbarhueoutdivmousemoveevent },
midbartranseventdivmousedownevent : { writable : false, value : _midbartranseventdivmousedownevent },
midbartranseventdivmousemoveevent : { writable : false, value : _midbartranseventdivmousemoveevent },
bottominputevent : { writable : false, value : _bottominputevent },
bottomchangespanclickevent : { writable : false, value : _bottomchangespanclickevent },
});
// 切换显示类型
function _bottomchangespanclickevent()
{
arguments[0].call();
}
// hex改变事件
function _bottominputevent()
{
arguments[0].call();
}
// 透明条鼠标按下
function _midbartranseventdivmousedownevent()
{
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
var a = target.getattribute("a");
if(!a)
{
var clienty = e.clienty;
var thisrect = this.getboundingclientrect();
var superrect = this.parentelement.getboundingclientrect();
var top = thisrect.top;
var bottom = superrect.bottom;
if(clienty <= top || clienty >= bottom)
{
return;
}
var clientx = e.clientx;
var left = thisrect.left;
var right = thisrect.right;
if(clientx <= left)
{
a = 0;
}else if(clientx >= right)
{
a = 100;
}else
{
// 穿透
target.style["display"] = "none";
var dom = document.elementfrompoint(clientx, clienty);
a = dom.getattribute("a");
}
}
target.style["display"] = "inline-block";
arguments[0].call(null, a);
// 开启drag
_transdragvo.flag = true;
}
// 透明条移动
function _midbartranseventdivmousemoveevent()
{
if(!_transdragvo.flag)
{
return;
}
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var a = target.getattribute("a");
if(!a)
{
var clienty = e.clienty;
var thisrect = this.getboundingclientrect();
var superrect = this.parentelement.getboundingclientrect();
var top = thisrect.top;
var bottom = superrect.bottom;
if(clienty <= top || clienty >= bottom)
{
return;
}
var clientx = e.clientx;
var left = thisrect.left;
var right = thisrect.right;
if(clientx <= left)
{
a = 0;
}else if(clientx >= right)
{
a = 100;
}else
{
// 穿透
target.style["display"] = "none";
var dom = document.elementfrompoint(clientx, clienty);
a = dom.getattribute("a");
}
}
target.style["display"] = "inline-block";
arguments[0].call(null, a);
}
// 彩虹条鼠标按下
function _midbarhueoutdivmousedownevent()
{
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
var h = target.getattribute("h");
if(!h)
{
var clienty = e.clienty;
var thisrect = this.getboundingclientrect();
var superrect = this.parentelement.getboundingclientrect();
var top = thisrect.top;
var bottom = superrect.bottom;
if(clienty <= top || clienty >= bottom)
{
return;
}
var clientx = e.clientx;
var left = thisrect.left;
var right = thisrect.right;
if(clientx <= left)
{
h = 0;
}else if(clientx >= right)
{
h = 360;
}else
{
// 穿透
target.style["display"] = "none";
var dom = document.elementfrompoint(clientx, clienty);
h = dom.getattribute("h");
}
}
target.style["display"] = "inline-block";
arguments[0].call(null, h);
// 开启drag
_huedragvo.flag = true;
}
// 彩虹条鼠标移动
function _midbarhueoutdivmousemoveevent()
{
if(!_huedragvo.flag)
{
return;
}
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var h = target.getattribute("h");
if(!h)
{
var clienty = e.clienty;
var thisrect = this.getboundingclientrect();
var superrect = this.parentelement.getboundingclientrect();
var top = thisrect.top;
var bottom = superrect.bottom;
if(clienty <= top || clienty >= bottom)
{
return;
}
var clientx = e.clientx;
var left = thisrect.left;
var right = thisrect.right;
if(clientx <= left)
{
h = 0;
}else if(clientx >= right)
{
h = 360;
}else
{
// 穿透
target.style["display"] = "none";
var dom = document.elementfrompoint(clientx, clienty);
h = dom.getattribute("h");
}
}
target.style["display"] = "inline-block";
arguments[0].call(null, h);
}
// 色盘鼠标按下
function _paletteoutdivmousedownevent()
{
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
// 获取 s v
var s = target.getattribute("s");
var v = target.getattribute("v");
if(!s)
{
// 当点击到圆圈时，穿透
target.style["display"] = "none";
var dom = document.elementfrompoint(e.clientx, e.clienty);
s = dom.getattribute("s");
v = dom.getattribute("v");
}
target.style["display"] = "inline-block";
arguments[0].call(null, s, v);
// 开启drag
_palettedragvo.flag = true;
}
// 色盘鼠标移动
function _paletteoutdivmousemoveevent()
{
if(!_palettedragvo.flag)
{
return;
}
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
// 获取 s v
var s = target.getattribute("s");
var v = target.getattribute("v");
var flag = true;
if(!s)
{
// 当点击到圆圈时，穿透
target.style["display"] = "none";
var dom = document.elementfrompoint(e.clientx, e.clienty);
s = dom.getattribute("s");
v = dom.getattribute("v");
}
target.style["display"] = "inline-block";
arguments[0].call(null, s, v);
}
// 色盘鼠标弹起
function _docmouseupevent()
{
// 停止drag
_palettedragvo.flag && (_palettedragvo.flag = false);
_huedragvo.flag && (_huedragvo.flag = false);
_transdragvo.flag && (_transdragvo.flag = false);
}
// doc鼠标按下事件 [_start, _classname, _outdiv, _setcolor]
function _docmousedownevent()
{
var _start = arguments[0];
if(!_start)
{
return;
}
var _outdiv = arguments[2];
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
// 判断input type='text'
var tagname = target.tagname;
var type = target.type;
if(!tagname || tagname.tolowercase() != "input" || !type || type.tolowercase() != "text")
{
// 隐藏弹框
document.body.contains(_outdiv) && document.body.removechild(_outdiv);
return;
}
// 判断class
var classlist = target.classname.split(" ");
var _classname = arguments[1];
var index = classlist.indexof(_classname);
if(index < 0)
{
// 隐藏弹框
document.body.contains(_outdiv) && document.body.removechild(_outdiv);
return;
}
document.body.appendchild(_outdiv);
// 确定弹框位置
var top = target.offsettop + target.offsetheight;
_outdiv.style["top"] = top + "px";
var winwidth = document.body.scrollwidth;
var targetleft = target.offsetleft;
var targetwidth = target.offsetwidth;
if((targetleft + 242) <= winwidth)
{
_outdiv.style["left"] = targetleft + "px";
}else
{
_outdiv.style["left"] = (winwidth - 242) + "px";
}
arguments[3].call(target);
}
// 鼠标移动事件
function _docmousemoveevent()
{
var e = _paletteutil.event.getevent(event);
// 禁止默认事件
_palettedragvo.flag && _paletteutil.event.preventdefault(e);
_huedragvo.flag && _paletteutil.event.preventdefault(e);
_transdragvo.flag && _paletteutil.event.preventdefault(e);
}
// 最外框阻止冒泡
function _outdivmousedownevent()
{
var e = _paletteutil.event.getevent(event);
_paletteutil.event.stoppropagation(e);
}
}
/**
* dom类
*/
du.yue.palettedom = function()
{
var _paletteutil = du.yue.paletteutil;
object.defineproperties(this, {
getpalettedomvo : { writable : false, value : _getpalettedomvo },
gethuedomvo : { writable : false, value : _gethuedomvo },
gettransparentdomvo : { writable : false, value : _gettransparentdomvo },
getoutdiv : { writable : false, value : _getoutdiv },
getpaletteoutdiv : { writable : false, value : _getpaletteoutdiv },
getpalettecirclediv : { writable : false, value : _getpalettecirclediv },
getpaletteshowdiv : { writable : false, value : _getpaletteshowdiv },
getmidoutdiv : { writable : false, value : _getmidoutdiv },
getmidshowdiv : { writable : false, value : _getmidshowdiv },
getmidbaroutdiv : { writable : false, value : _getmidbaroutdiv },
getmidbarhueoutdiv : { writable : false, value : _getmidbarhueoutdiv },
getmidbarcirclediv : { writable : false, value : _getmidbarcirclediv },
getmidbarhuediv : { writable : false, value : _getmidbarhuediv },
getbottomoutdiv : { writable : false, value : _getbottomoutdiv },
getbottominputoutdiv : { writable : false, value : _getbottominputoutdiv },
getbottomlabeldiv : { writable : false, value : _getbottomlabeldiv },
getbottominputdiv : { writable : false, value : _getbottominputdiv },
getbottomhexinput : { writable : false, value : _getbottomhexinput },
getbottomrgbinput : { writable : false, value : _getbottomrgbinput },
getbottomchangediv : { writable : false, value : _getbottomchangediv },
getbottomchangespan : { writable : false, value : _getbottomchangespan }
});
function _$c(tagname)
{
return document.createelement(tagname);
}
// 创建1w个div
function _getpalettedomvo()
{
var palettedomvo = {};
for(var x = 100;x>=0;x--)
{
for(var y = 100;y>=0;y--)
{
var p = _$c("p");
p.setattribute("s", y);
p.setattribute("v", x);
p.style["position"] = "absolute";
p.style["width"] = 2.4 + "px";
p.style["height"] = 1.8 + "px";
palettedomvo[y + "-" + x] = p;
}
}
return palettedomvo;
}
// 创建彩虹条
function _gethuedomvo()
{
var huedomvo = {};
var width = number(180 / 361).tofixed(1);
for(var a = 0;a<=360;a++)
{
var hsv = [a, 100, 100];
var rgb = _paletteutil.color.hsvtorgb(hsv);
var p = _$c("p");
p.setattribute("h", a);
p.style["position"] = "absolute";
p.style["top"] = "0px";
p.style["left"] = (a * width) + "px";
p.style["width"] = width + "px";
p.style["height"] = "15px";
p.style["background-color"] = "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
huedomvo[a] = p;
}
return huedomvo;
}
// 创建透明度条
function _gettransparentdomvo()
{
var transparentdomvo = {};
var width = number(180 / 101).tofixed(1);
for(var a = 0;a<=100;a++)
{
var p = _$c("p");
p.setattribute("a", a);
p.style["position"] = "absolute";
p.style["top"] = "0px";
p.style["left"] = (a * width) + "px";
p.style["width"] = width + "px";
p.style["height"] = "15px";
p.style["background-color"] = "rgb(223,233,233,"+number(a/100).tofixed(2)+")";
transparentdomvo[a] = p;
}
return transparentdomvo;
}
// 创建最外框div --
function _getoutdiv()
{
var p = _$c("p");
p.style["position"] = "absolute";
p.style["width"] = "242px";
p.style["height"] = "300px";
p.style["border"] = "1px solid #969696";
p.style["overflow"] = "hidden";
p.style["background-color"] = "#fff";
p.style["position"] = "absolute";
p.style["z-index"] = "999999";
return p;
}
// 创建色盘包裹div
function _getpaletteoutdiv()
{
var p = _$c("p");
p.style["position"] = "relative";
p.style["width"] = "242px";
p.style["height"] = "180px";
p.style["overflow"] = "hidden";
return p;
}
// 创建选择圆圈
function _getpalettecirclediv()
{
var p = _$c("p");
p.style["position"] = "absolute";
p.style["z-index"] = "1";
p.style["width"] = "10px";
p.style["height"] = "10px";
p.style["border"] = "1px solid #ffffff";
p.style["border-radius"] = "50px";
return p;
}
// 创建操作区
function _getpaletteshowdiv()
{
return _$c("p");
}
// 创建中间区域外框
function _getmidoutdiv()
{
var p = _$c("p");
p.style["width"] = "240px";
p.style["height"] = "60px";
p.style["margin-top"] = "5px";
return p;
}
// 创建显示色卡
function _getmidshowdiv()
{
var p = _$c("p");
p.style["float"] = "left";
p.style["width"] = "38px";
p.style["height"] = "38px";
p.style["margin"] = "8px 0px 0px 4px";
p.style["border-radius"] = "50px";
p.style["border"] = "1px solid #d0d0d0";
return p;
}
// 创建条形包裹
function _getmidbaroutdiv()
{
var p = _$c("p");
p.style["float"] = "right";
p.style["width"] = "193px";
p.style["height"] = "60px";
return p;
}
// 创建彩虹条包裹
function _getmidbarhueoutdiv()
{
var p = _$c("p");
p.style["position"] = "relative";
p.style["width"] = "181px";
p.style["height"] = "14px";
p.style["margin"] = "8px 0px 0px 4px";
p.style["border"] = "1px solid #dadada";
return p;
}
// 创建彩虹条和透明度选择圆圈
function _getmidbarcirclediv()
{
var p = _$c("p");
p.style["position"] = "absolute";
p.style["top"] = "-2px";
p.style["z-index"] = "1";
p.style["width"] = "16px";
p.style["height"] = "16px";
p.style["border"] = "1px solid #a9a9a9";
p.style["border-radius"] = "50px";
p.style["background-color"] = "#fff";
return p;
}
// 创建彩虹条
function _getmidbarhuediv()
{
return _getpaletteshowdiv();
}
// 创建显示栏
function _getbottomoutdiv()
{
var p = _$c("p");
p.style["width"] = "240px";
p.style["height"] = "60px";
return p;
}
// 创建显示详情
function _getbottominputoutdiv()
{
var p = _$c("p");
p.style["float"] = "left";
p.style["width"] = "200px";
p.style["height"] = "60px";
p.style["text-align"] = "center";
p.style["color"] = "#9c988f";
return p;
}
// 创建显示类型
function _getbottomlabeldiv()
{
var p = _$c("p");
p.style["height"] = "20px";
p.style["text-align"] = "center";
p.style["font-size"] = "13px";
return p;
}
// 创建输入包裹框
function _getbottominputdiv()
{
var p = _$c("p");
p.style["height"] = "30px";
p.style["text-align"] = "center";
return p;
}
// 创建输入框
function _getbottomhexinput()
{
var ipt = _$c("input");
ipt.type = "text";
ipt.style["text-align"] = "center";
ipt.style["color"] = "#464646";
ipt.style["width"] = "180px";
ipt.style["height"] = "20px";
ipt.style["line-height"] = "20px";
ipt.style["font-size"] = "13px";
ipt.style["font-family"] = "consolas";
ipt.setattribute("maxlength", "9");
return ipt;
}
// 创建输入框
function _getbottomrgbinput()
{
var ipt = _$c("input");
ipt.type = "text";
ipt.style["text-align"] = "center";
ipt.style["color"] = "#464646";
ipt.style["width"] = "30px";
ipt.style["height"] = "20px";
ipt.style["line-height"] = "20px";
ipt.style["font-size"] = "13px";
ipt.style["font-family"] = "consolas";
ipt.setattribute("maxlength", "3");
return ipt;
}
// 创建切换包裹框
function _getbottomchangediv()
{
var p = _$c("p");
p.style["float"] = "right";
p.style["width"] = "40px";
p.style["height"] = "60px";
p.style["line-height"] = "30px";
p.style["text-align"] = "center";
p.style["color"] = "#9c988f";
p.style["font-size"] = "13px";
p.style["margin-top"] = "8px";
p.style["cursor"] = "default";
return p;
}
// 创建切换标签
function _getbottomchangespan()
{
var span = _$c("span");
span.style["text-decoration"] = "underline";
span.style["cursor"] = "pointer";
span.innerhtml = ">>";
return span;
}
}
/**
* 工具类
*/
du.yue.paletteutil = {
// 事件工具
event : {
getevent : function(event)
{
return event event : window.event;
},
gettarget : function(event)
{
return event.target || event.srcelement;
},
preventdefault : function(event)
{
if(event.preventdefault)
{
event.preventdefault();
}else
{
event.returnvalue = false;
}
},
stoppropagation : function(event)
{
if(event.stoppropagation)
{
event.stoppropagation();
}else
{
event.cancelbubble = true;
}
},
fire : function(target, eventname)
{
if(document.createeventobject)
{
var evt = document.createeventobject();
target.fireevent("on" + eventname, evt);
}
else
{
var evt = document.createevent("htmlevents");
evt.initevent("change", true, true);
target.dispatchevent(evt);
}
}
},
// 颜色转换
color : {
hsvtorgb : function(hsv)
{
var h = hsv[0];
var s = hsv[1];
var v = hsv[2];
if(h == undefined || isnan(h) || h < 0 || h > 360)
{
throw "h must be a number, greater than 0 and less than 360";
return;
}
if(s == undefined || isnan(s) || s < 0 || s > 100)
{
throw "s must be a number, greater than 0 and less than 100";
return;
}
if(v == undefined || isnan(v) || v < 0 || v > 100)
{
throw "v must be a number, greater than 0 and less than 100";
return;
}
s = s / 100;
v = v / 100;
var c = v * s;
var x = c * (1 - math.abs( (h / 60) % 2 - 1 ));
var m = v - c;
var _rgb = [];
if(h >= 0 && h < 60)
{
_rgb = [c, x, 0];
}else if(h >= 60 && h < 120)
{
_rgb = [x, c, 0];
}else if(h >= 120 && h < 180)
{
_rgb = [0, c, x];
}else if(h >= 180 && h < 240)
{
_rgb = [0, x, c];
}else if(h >= 240 && h < 300)
{
_rgb = [x, 0, c];
}else
{
_rgb = [c, 0, x];
}
return [math.round((_rgb[0] + m) * 255), math.round((_rgb[1] + m) * 255), math.round((_rgb[2] + m) * 255)];
},
rgbtohsv : function(rgb)
{
var r = rgb[0];
var g = rgb[1];
var b = rgb[2];
// 错误判断
(r == undefined || isnan(r) || r > 255) && (r = 255);
(r < 0) && (r = 0);
(g == undefined || isnan(g) || g > 255) && (g = 255);
(g < 0) && (g = 0);
(b == undefined || isnan(b) || b > 255) && (b = 255);
(b < 0) && (b = 0);
// 计算
var _r = r / 255;
var _g = g / 255;
var _b = b / 255;
var cmax = math.max(_r, _g, _b);
var cmin = math.min(_r, _g, _b);
var x = cmax - cmin;
var hsv = [];
// h
if(x == 0)
{
hsv[0] = 0;
}else if(cmax == _r && _g >= _b)
{
hsv[0] = (x == 0 0 : (60 * (_g - _b) / x));
}else if(cmax == _r && _g < _b)
{
hsv[0] = (x == 0 0 : (60 * (_g - _b) / x) + 360);
}else if(cmax == _g)
{
hsv[0] = (x == 0 0 : (60 * (((_b - _r) / x) + 2)));
}else if(cmax == _b)
{
hsv[0] = (x == 0 0 : (60 * (((_r - _g) / x) + 4)));
}
// s
if(cmax == 0)
{
hsv[1] = 0;
}else
{
hsv[1] = (cmax == 0 0 : (x / cmax * 100));
}
// v
hsv[2] = (cmax * 100);
return hsv;
},
hextorgb : function(hex)
{
var _hex = [];
hex = hex && hex.trim();
if(hex.substring(0,1) == "#"){
hex = hex.substr(1,hex.length).replace(/\s*/g,"");
}else
{
return [255, 255, 255, 1];
}
switch (hex.length) {
case 0:
return [255, 255, 255, 1];
break;
case 1:
_hex = [hex+hex, hex+hex, hex+hex, "ff"];
break;
case 2:
_hex = [hex, hex, hex, "ff"];
break;
case 3:
var arr = hex.split('');
_hex = [arr[0]+arr[0], arr[1]+arr[1], arr[2]+arr[2], "ff"];
break;
case 4:
var arr = hex.split('');
_hex = [arr[0]+arr[0], arr[1]+arr[1], arr[2]+arr[2], arr[3]+arr[3]];
break;
case 4:
var arr = hex.split('');
_hex = [arr[0]+arr[0], arr[1]+arr[1], arr[2]+arr[2], arr[3]+arr[3]];
break;
case 5:
var arr = hex.split('');
_hex = [arr[0]+arr[0], arr[1]+arr[1], arr[2]+arr[2], arr[3]+arr[4]];
break;
case 6:
var arr = hex.split('');
_hex = [arr[0]+arr[1], arr[2]+arr[3], arr[4]+arr[5], "ff"];
break;
case 7:
var arr = hex.split('');
_hex = [arr[0]+arr[1], arr[2]+arr[3], arr[4]+arr[5], arr[6]+arr[6]];
break;
default:
var arr = hex.split('');
_hex = [arr[0]+arr[1], arr[2]+arr[3], arr[4]+arr[5], arr[6]+arr[7]];
break;
}
var r = parseint("0x" + _hex[0]);
r = isnan(r) 255 : r;
var g = parseint("0x" + _hex[1]);
g = isnan(g) 255 : g;
var b = parseint("0x" + _hex[2]);
b = isnan(b) 255 : b;
var a = parseint("0x" + _hex[3]);
a = isnan(a) 1 : number(number(a / 255).tofixed(2));
return [r, g, b, a];
},
rgbtohex : function(rgb)
{
var _rgb = (rgb instanceof array) rgb : this.rgbtoarray(rgb);
var _hex = [];
for(var x = 0;x<3;x++)
{
var y = _rgb[x];
if(isnan(number(y)))
{
_hex[x] = "ff";
}else
{
var _y = number(y).tostring(16);
_hex[x] = _y.length == 1 "0" + _y : _y;
}
}
// 透明度单独处理
if(!isnan(number(_rgb[3])))
{
var a = math.floor(number(_rgb[3]) * 255);
if(a != 255)
{
a = a.tostring(16).touppercase();
_hex[3] = a.length == 1 "0" + a : a;
}
}
return _hex.join("").touppercase();
},
rgbtoarray : function(rgb)
{
var _rgb = [];
rgb = rgb && rgb.trim().touppercase();
if(rgb.substring(0,3) == "rgb")
{
_rgb = rgb.replace("rgb(","").replace(")","").replace(/\s*/g,"").split(",");
}else
{
_rgb = [255, 255, 255, 1];
}
return _rgb;
}
}
}
如何调用？很简单：
var palettetopvo = new du.yue.palettetop(); palettetopvo.start(0,"palette"); // 0-p模式；palette自定义classname 默认my-palette
上一篇： 下午下班