`
JavaSam
  • 浏览: 952161 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

纯javascript拾色器

 
阅读更多 

<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>纯javascript拾色器</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">
			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, b, 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(-3).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, -1))
							for (d in a) {
								if (!1 === e.call(a[d], d, a[d]))
									break
							}
						else
							for (; b < f && !1 !== e.call(a, b, 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, e, b, c) {
						a.attachEvent && function(a, b, e) {
							a.attachEvent("on" + b, e)
						}.apply(this, arguments);
						a.addEventListener && function(a, b, e) {
							a.addEventListener(b, e, c || !1)
						}.apply(this, arguments);
						a["on" + e] && function(a, b, 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#\u5173\u95ed"], ["div", "class#colorPicker-container"]], b, d;
					c.each(a, function(g, f) {
						b = c.getHtmlElement(f[0]);
						c.each(f[1].split(","), function(a, 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", function(a) {
						i.eventContrl(a)
					}, !1);
					c.addEvent(this.elem[3], "click", 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 ? -1 : 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>
 
分享到：
| javascript 面向对象编程点滴
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯JavaScript网页取色器代码.rar

    纯JS实现的网页取色器代码，或者叫拾色器，颜色选择器选色使用技巧：1.双击颜色 或 单击颜色,微调亮度,点确定2.色彩亮度微调:在右边竖立的颜色条中进行,下载本程序方法：在IE菜单中，点 文件 按钮，点保存即可。或...

    强大的js拾色器

    总结来说，JS拾色器是一个结合了颜色理论、用户交互和JavaScript技术的实用工具。通过理解和实现这些关键技术点，开发者可以创建出满足各种需求的色彩选择器，提升用户的使用体验。在设计和实现过程中，注重用户体验...

    拾色器 getcolor

    "拾色器 getcolor"是一款实用工具，专为IT专业人士和设计者设计，它能够帮助用户从屏幕上选取并识别特定像素的颜色值。这款工具的独特之处在于它可以显示颜色的16进制表示，这是在编程、网页设计和图形设计中常用的...

    JavaScript实现HSL拾色器

    在本文中，我们将深入探讨如何使用JavaScript实现一个HSL拾色器。HSL（色相、饱和度、亮度）色彩模型是一种在计算机图形学中广泛使用的颜色表示方式，它将颜色分为三个独立的维度：色相（H）、饱和度（S）和亮度（L...

    原生js颜色选择色值拾取(拾色器)插件.zip

    "原生js颜色选择色值拾取(拾色器)插件.zip" 提供了一个用纯JavaScript编写的解决方案，无需依赖任何外部库如jQuery或其他框架。这个插件使得开发者能够轻松地在网页上添加颜色选择功能，让用户体验更加直观和便捷。 ...

    纯JavaScript贪吃蛇小游戏

    本项目是用纯JavaScript实现的贪吃蛇小游戏，非常适合初学者了解JavaScript语言特性和游戏开发的基础。 ### 一、JavaScript基础 JavaScript是一种广泛用于网页和网络应用的解释型编程语言，主要负责网页的动态效果...

    web开发取色工具

    1. **屏幕拾色**：允许用户通过鼠标点击屏幕上的任何位置获取该点的颜色值。 2. **颜色预览**：显示选取颜色的效果，以便用户确认颜色是否符合预期。 3. **颜色转换**：在16进制和10进制之间自由转换，有时还会提供...

    colorpicker:纯js颜色选择器和渐变选择器

    EasyLogic的拾色器 创建该项目是为了实现颜色选择器。 它实现了颜色的基本功能并实现了图像滤镜。 文档网站： : 安装 npm npm install @easylogic/colorpicker 使用方法（浏览器） &lt;link href=...

    一个值得推荐的漂亮的基于纯JS及时实现的颜色选择控件源码例子

    5. **拾色器**：一种工具，可以点击画布上的任意位置选择颜色。 在纯JS实现中，开发者可能使用HTML5的`&lt;input type="color"&gt;`元素作为基础，或者自定义UI元素并通过监听事件来实现交互。例如，通过鼠标或触摸事件...

    15个基于Web的HTML编辑器

    openWYSIWYG是一个跨浏览器、纯JavaScript开发、强大开源的WYSIWYG编辑器。支持多种Web编程语言：PHP、ASP、ASP.NET、Perl、Java、ColdFusion。 8. Free Rich Text Editor Free Rich Text Editor是一个极其简单...

    纯css3音阶波浪loading加载动画特效

    这个加载动画通过纯CSS3技术，无需JavaScript或其他编程语言，就能实现优雅且引人入胜的用户体验。CSS3的动画属性、选择器和过渡效果在其中起到了关键作用。 1. **CSS3动画属性**：在CSS3中，`@keyframes` 规则允许...

    svelte-jsoneditor:一个基于Web的工具，用于查看，编辑，格式化，转换和验证JSON

    该库是用Svelte编写的，但是可以在任何框架（React，Angular，纯JavaScript）中使用。 安装 npm install 使用 有关一些完整的示例，请参见部分。 Card.svelte 创建带有双向绑定的JSONEditor bind:json ： &lt; ...

    颜色选取与进制转换

    颜色选取工具允许用户通过滑块、调色板或拾色器来选择所需的颜色。例如，Photoshop的色彩拾取器可以让用户直观地调整RGB、HSV或HSB参数，以找到理想的颜色。在网页开发中，可以使用HTML的`&lt;input type="color"&gt;`元素...

    JS画家：用VanillaJS制成的绘画板

    【标题】"JS画家：用VanillaJS制成的绘画板"揭示了这是一个使用纯JavaScript（VanillaJS）开发的在线绘图应用。VanillaJS指的是不依赖任何库或框架的原生JavaScript，它允许开发者充分利用JavaScript的核心功能，...

    Paltalk皮肤改变「Paltalk Skin Changer」-crx插件

    该扩展程序带有一个“拾色器”小部件，可为您提供多种颜色供您选择。 注意：您也可以下载适用于Chrome和Firefox Web浏览器的扩展。 只需在Mozilla.org或O​​pera.com上搜索“ Paltalk Skin Changer”即可。 =======...

Magicbox
Global site tag (gtag.js) - Google Analytics