web前段js拾色器_html-js-css

概述将下面的代码复制出去，保存.html&ltspan style="font-size:18px;"&gt&lthtml &gt&lthead&gt&ltmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt&lttitle&gt无标题文档&lt/title&gt

将下面的代码复制出去，保存.HTML

<span style="Font-size:18px;"><HTML ><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf⑻" /><Title>无标题文档</Title><style type="text/CSS"> #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPick-close{position:absolute;right:0;} #abc-colorPicker a,#filter-colorPicker a,#colorPicker a{border-bottom:1px solID #000;border-left:1px solID #FFF;border-right:1px solID #000;border-top:1px solID #FFF;cursor:pointer;display:block;float:left;height:15px;overflow:hidden;wIDth:15px;} #abc-colorPicker a:hover,#filter-colorPicker a:hover,#colorPicker a:hover{opacity:.5;} #abc-colorPicker li,#filter-colorPicker li,#colorPicker li{display:inline;List-style:none;overflow:hidden;} #abc-colorPicker ul,#filter-colorPicker ul,#colorPicker ul{-moz-Transition:all .8s ease-in 1s;-ms-Transition:all .8s ease-in 1s;-o-Transition:all .8s ease-in 1s;-webkit-Transition:all .8s ease-in 1s;float:left;margin:0;overflow:hidden;Transition:all .8s ease-in 1s;wIDth:102px;} #abc-colorPicker,#filter-colorPicker,#colorPicker{background:#FFF;border:solID 1px #eee;display:none;padding:5px;wIDth:312px;} #demo{height:600px;margin:0 auto;wIDth:800px;} *{margin:0;padding:0;} .colorPicker-container a:hover{border-bottom:1px solID #000;border-top:1px solID #000;} .colorPicker-prevIEw{color:#FFF;display:inline-block;height:30px;line-height:30px;wIDth:60px;} .colorPicker-Title{height:30px;overflow:hidden;} </style></head><body><div style="height:500px;"></div><div ID="demo"> <input type="text" ID="filter"/> <input type="text" ID="abc"/></div><script type="text/JavaScript">/* * copyright 2012 enix@foxmail.com */ function colorPicker(k,j){var i=this,h=arguments.callee,l,b,c;if(!(this instanceof h))return i=new h(k,j);b=h.prototype;b.constructor=h;h.cache||(h.cache=[]);c={createcolorData:function(){var a=h.cache,e,d,g,f=0,c=0;for(e=0;6>e;e++){a.push("<ul>");for(d=0;6>d;d++){a.push("<li>");for(g=0;6>g;g++)b=("000"+f.toString(16)).slice(⑶).toupperCase(),c++,i.color.push(b),a.push('<a index="'+c+'" style="background: #'+b+'" Title="#'+b+'" JavaScript="voID (0);"></a>'),f+=3;f+=30;a.push("</li>")}a.push("</ul>"); f+=480}"function"===typeof this.ongetcolorstring&&this.ongetcolorstring.call(this.color)},getHTMLElement:function(a){this.element||(this.element={});this.element[a]||(this.element[a]=l.createElement(a));return this.element[a].cloneNode(!0)},each:function(a,e){var d,b=0,f=a.length>>>0;if("Object"==={}.toString.call(a).slice(8,⑴))for(d in a){if(!1===e.call(a[d],a[d]))break}else for(;b<f&&!1!==e.call(a,a[b++]););},getVIEwportSize:function(){var a=[0,0];voID 0!==window.innerWIDth?a=[window.innerWIDth,window.innerHeight]:a=[document.documentElement.clIEntWIDth,document.documentElement.clIEntHeight];return a},getClinetRect:function(a){a=a.getBoundingClIEntRect();return a=a={left:a.left,right:a.right,top:a.top,bottom:a.bottom,height:a.height||a.bottom-a.top,wIDth:a.wIDth||a.right-a.left}},getScrollposition:function(){var a=[0,0];window.pageYOffset?a=[window.pageXOffset,window.pageYOffset]:"undefined"!=typeof document.documentElement.scrolltop&&0<document.documentElement.scrolltop?a=[document.documentElement.scrollleft,document.documentElement.scrolltop]:"undefined"!=typeof document.body.scrolltop&&(a=[document.body.scrollleft,document.body.scrolltop]);return a},addEvent:function(a,c){a.attachEvent&&function(a,e){a.attachEvent("on"+b,e)}.apply(this,arguments);a.addEventListener&&function(a,e){a.addEventListener(b,c||!1)}.apply(this,arguments);a["on"+e]&&function(a,e){a["on"+b]=function(){e()}}.apply(this,arguments)}};b.Init=function(){l=document;this.color=[];this.offset=k;this.offsetSize=c.getClinetRect(this.offset); j||(this.prefix="colorPicker");j&&Object&&(c.each(j,function(a,b){i[a]||(i[a]=b)}),this.prefix=j.prefix?j.prefix+"-colorPicker":this.prefix);this.isinputText="input"===this.offset.nodename.tolowerCase()&&"text"===this.offset.getAttribute("type");0==h.cache.length&&c.createcolorData();this.createPacker().addEvent().render()};b.createPacker=function(){var a=[["div","ID#"+this.prefix+",class#colorPicker"],["div","class#colorPicker-Title"],["span","class#colorPicker-prevIEw"],["input","type#button,class#colorPick-close,value#u5173u95ed"],"class#colorPicker-container"]],d;c.each(a,function(g,f){b=c.getHTMLElement(f[0]);c.each(f[1].split(","),c){d=c.split("#");d[0]&&b.setAttribute(d[0],d[1])});a.splice(g,1,b)});this.elem=a;return this};b.addEvent=function(){c.addEvent(i.elem[4],"mouSEOver",function(a){i.eventContrl(a)},!1);c.addEvent(this.elem[4],"click",!1);c.addEvent(this.elem[3],function(){i.kill()},!1);return this};b.getcolor=function(a){this.current&&this.current.constructor=== String&&(a.classname=this.current);this.elem[2].INNERHTML=this.fixcolorValue(a.Title);this.elem[2].style.background=a.Title};b.eventContrl=function(a){var a=a||window.event,b=this.getCurrent(a);b&&("mouSEOver"==a.type?this.getcolor(b):this.outputValue(b))};b.getCurrent=function(a){a=a||window.event;for(a=a.target||a.srcElement;a&&(3==a.nodeType||"a"!==a.nodename.tolowerCase());)a=a.parentNode;return this.currentElem=a};b.fixcolorValue=function(a){return!a?⑴:a.replace(/(w)/g,function(){return RegExp.$1+ RegExp.$1})};b.outputValue=function(a){a=this.fixcolorValue(a.Title);this.kill();!0===this.isinputText&&(this.offset.value=a);"function"===typeof this.ongetvalue&&this.ongetvalue.call([a]);return this};b.render=function(){var a=this.elem;a[1].appendChild(a[2]);a[1].appendChild(a[3]);a[0].appendChild(a[1]);a[0].appendChild(a[4]);this.offset.parentNode.appendChild(a[0]);a[4].INNERHTML=h.cache.join("");"function"===typeof this.onrendered&&this.onrendered.call(this);return this};b.checkposition=function(a,b){var a=this.elem[0],d=c.getClinetRect(a),g=c.getVIEwportSize(),f=c.getScrollposition();if(!(d.height>g[1]||d.wIDth>g[0]))return 0<d.right-g[0]&&(a.style.left=b.right-d.wIDth+"px"),0<d.bottom-g[1]&&(a.style.top=b.top-d.height+f[1]+"px"),this};b.kill=function(){this.elem[0].style.display="none";return this};b.display=function(){var a=c.getClinetRect(this.offset),b=this.elem[0];b.style.display="block";b.style.csstext="position:absolute;top:"+this.offsetSize.bottom+"px;left:"+this.offsetSize.left+"px; display:block;";this.checkposition(b,a);return this};this.Init()};</script><script type="text/JavaScript">!function(window,doc,undefined){ window.colorPicker = (colorPicker); a = colorPicker(doc.getElementByID('filter'),{prefix:'filter',ongetvalue:function () { //console.log(this) },bdf:'xdfdf'}); doc.getElementByID('filter').onfocus = function () { a.display() } /*b = colorPicker(doc.getElementByID('abc'),{prefix:'abc',ongetvalue:function () { console.log(this) }})*/ b = colorPicker(doc.getElementByID('abc')); doc.getElementByID('abc').onfocus = function () { b.display() }}(this,document)</script><div style="height:600px;"></div></body></HTML></span>

总结

以上是内存溢出为你收集整理的web前段js拾色器全部内容，希望文章能够帮你解决web前段js拾色器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1017259.html