欢迎访问 水平网    今天是:2017年11月19日 注册 | 登录 | 订阅 | 收藏
>> JavaScript >> 颜色选择器,弹出DIV层
推荐代码
热点代码

颜色选择器,弹出DIV层

作者:goaler,  来源:本站,  阅读:1340,  发布时间:2014-08-19  【放入收藏夹
调用 :
<input type="text" size="8" id="titlecolor" name="titlecolor" value=""  readonly onclick="showColor(this,'colorBox',event)" />
代码:Javascript复制
var arrayColor = new Array('#000000','#330000','#660000','#990000','#CC0000','#FF0000','#003300','#333300','#993300','#CC3300','#FF3300','#006600','#336600','#996600','#CC6600','#FF6600','#009900','#339900','#999900','#CC9900','#FF9900','#00CC00','#33CC00','#99CC00','#CCCC00','#FFCC00','#00FF00','#33FF00','#99FF00','#CCFF00','#FFFF00','#0000FF','#3300FF','#9900FF','#CC00FF','#FF00FF','#0033FF','#3333FF','#9933FF','#CC33FF','#FF33FF','#0066FF','#3366FF','#9966FF','#CC66FF','#FF66FF','#0099FF','#3399FF','#9999FF','#CC99FF','#FF99FF','#00CCFF','#33CCFF','#99CCFF','#CCCCFF','#FFCCFF','#00FFFF','#33FFFF','#99FFFF','#CCFFFF','');

function showColor(targ,pickerName,event) {
	var targ = targ;
	var d = offset($(targ));

	document.body.onclick = function(event) {
		var e = event || window.event;
		var ele = e.srcElement || e.target;
		if (ele.id == targ.id) {
			var oDiv = document.createElement('div');
			var strColor = '<table width="100%" cellpadding="0" cellspacing="1" align="center" border="0" bgcolor="#ffffff">';
				strColor += '<tr bgcolor="#ffffff">';
				for (var i = 1; i < (arrayColor.length); i++) {
					strColor += '<td onclick="setColor(\''+arrayColor[i]+'\');" width="20" height="20" bgcolor="'+arrayColor[i]+'">&nbsp;</td>';
					if (i % 8 == 0) {
						strColor += '</tr>';
						strColor += '<tr bgcolor="#ffffff">';
					}
				}
						
				strColor += '	</tr>';
				strColor += '</table>';
			oDiv.id = pickerName; 
			oDiv.name = pickerName; 
			oDiv.style.position = 'absolute'; 
			oDiv.style.zIndex = 1; 
			oDiv.style.left = (d.left + d.width)+'px'; 
			oDiv.style.top = d.top+'px'; 
			oDiv.style.width = '212px'; 
			oDiv.style.height = '170px';
			oDiv.style.background = '#ffffff';
			oDiv.style.border = '1px solid #004099';
			oDiv.style.padding = '1px';
			oDiv.innerHTML = strColor;
			document.body.appendChild(oDiv);
		
		}
		else {
			if ($(pickerName)) {
				document.body.removeChild($(pickerName));
			}
		}
	}

	this.setColor = function (sColor) {
		$(targ).value = sColor;
	}
}
代码:Javascript复制
function offset(e) {
	var t = e.offsetTop;
	var l = e.offsetLeft;
	var w = e.offsetWidth;
	var h = e.offsetHeight - 2;
	while(e = e.offsetParent) {
		t += e.offsetTop;
		l += e.offsetLeft;
	}
	return {
		top : t,
		left : l,
		width : w,
		height : h
	}
}
Tags:颜色
您可能还有兴趣查阅的内容
  • 没有相关内容
评论【共有1条评论】查看所有评论
昵称:(*)   邮箱:   QQ:   验证码: 看不清楚?点击刷新验证码
goaler 于 2017-01-16 16:41:40 发表如下评论: 
不错,满好用的一个代码