动态改变背景颜色的小控件
可以通过样式修改控件的位置及控件大小，可以通过参数指定要改变背景颜色的目标对象，如果不指定，则默认改变body的背景颜色。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>改变背景颜色的小控件</title>
<style>
<!--
#idContainer{
position:relative;
width:100px;
height:100px;
border:solid 5px #777777;
}
.outerLyr{
background-color:red;
position: absolute;
height:100%;
width: 15%;
z-index: 1;
float:left;
display:inline;
left:10%;
}
.outerLyr1{
background-color:green;
position: absolute;
height:100%;
width: 15%;
z-index: 1;
float:left;
display:inline;
left:40%;
}
.outerLyr2{
background-color:blue;
position: absolute;
height:100%;
width: 15%;
z-index: 1;
float:left;
display:inline;
left:70%;
}
.drag{
position:absolute;
height: 15%;
width: 84%;
z-index: 3;
left:8%;
cursor: hand;
bottom:0px;
background:black;
top:20%;
}
.innerLyr{
background-color: #777777;
position: absolute;
height: 98%;
width: 84%;
z-index: 2;
text-align:center;
left:8%;
top:1%;
}
.barLyr{
background-color: #000000;
position: absolute;
height: 90%;
width: 10%;
z-index: 1;
top:5%;
}
-->
</style>
</head>
<body>
<div id="idContainer"></div>
<div id="idObj" style="position:absolute;left:200px;height:100px;width:100px;height:100px;border:1px solid black;background:white"></div>
<script type="text/javascript">
<!--
var cp = new ColorPalette("idContainer", "idObj");
//-->
</script>
</body>
</html>
在<head>内插入如下JS代码：
<script type="text/javascript">
<!--
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 实例化一个对象并调用对象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
//为对象注册事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
// 为对象注销事件
var removeEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
};
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
};
var ColorPalette = Class.create();
ColorPalette.prototype = {
initialize : function(idContainer, idObj) {
this.container = $(idContainer) || null;
this.obj = $(idObj) || document.body;
if (this.container == null) return;
this.container.style.position = "relative";
var outerLyr = '<div id="rOuterLyr" class="outerLyr"><div id="rDrag" class="drag"></div><div id="innerLyr" class="innerLyr"><div id="barLyr" class="barLyr"></div></div></div>';
var outerLyr1 = '<div id="gOuterLyr" class="outerLyr1"><div id="gDrag" class="drag"></div><div id="innerLyr1" class="innerLyr"><div id="barLyr1" class="barLyr"></div></div></div>';
var outerLyr2 = '<div id="bOuterLyr" class="outerLyr2"><div id="bDrag" class="drag"></div><div id="innerLyr2" class="innerLyr"><div id="barLyr2" class="barLyr"></div></div></div>';
this.container.innerHTML = outerLyr + outerLyr1 + outerLyr2;
var rDrag = $("rDrag"), gDrag = $("gDrag"), bDrag = $("bDrag");
var rOuterLyr = $("rOuterLyr"), gOuterLyr = $("gOuterLyr"), bOuterLyr = $("bOuterLyr");
this.fM = BindAsEventListener(this, this.move);
this.fS = Bind(this, this.stop);
// 计算并设置初始化时的颜色值
var rVal = Math.round(rDrag.offsetTop * 255 / (rOuterLyr.offsetHeight - rDrag.offsetHeight));
var gVal = Math.round(gDrag.offsetTop * 255 / (gOuterLyr.offsetHeight - gDrag.offsetHeight));
var bVal = Math.round(bDrag.offsetTop * 255 / (bOuterLyr.offsetHeight - bDrag.offsetHeight));
this.r = this.getHex(rVal);
this.g = this.getHex(gVal);
this.b = this.getHex(bVal);
this.obj.style.backgroundColor = "#" + this.r + this.g + this.b;
// 注册事件
this.drag = rDrag;
this.outerLyr = rOuterLyr;
this.flag = 1; // 标记是修改r,g,b的值(1:r;2:g;3:b)
var oThis = this;
addEventHandler(rDrag, "mousedown", function(event) {oThis.drag = rDrag; oThis.outerLyr = rOuterLyr; oThis.flag = 1; oThis.start(event || window.event);});
addEventHandler(gDrag, "mousedown", function(event) {oThis.drag = gDrag; oThis.outerLyr = gOuterLyr; oThis.flag = 2; oThis.start(event || window.event);});
addEventHandler(bDrag, "mousedown", function(event) {oThis.drag = bDrag; oThis.outerLyr = bOuterLyr; oThis.flag = 3; oThis.start(event || window.event);});
},
start : function(oEvent) {
this.y = this.drag.offsetTop;
this.yPos = oEvent.clientY;
this.dragHeight = this.drag.offsetHeight;
this.outerLyrHeight = this.outerLyr.offsetHeight;
addEventHandler(document, "mousemove", this.fM);
addEventHandler(document, "mouseup", this.fS);
},
move : function(oEvent) {
var iDrag = this.drag, oldY = iDrag.style.pixelTop, iHeight = this.outerLyrHeight - this.dragHeight;
var iPos = this.y + oEvent.clientY - this.yPos;
if (iPos > oldY) {
this.dir = -1; // 向下
} else {
this.dir = 1; // 向上
}
if (iPos <= 0 && this.dir == 1) {
iDrag.style.pixelTop = 0;
this.dir = 1;
} else if (iPos >= iHeight && this.dir == -1) {
iDrag.style.pixelTop = iHeight;
this.dir = -1;
} else {
iDrag.style.pixelTop = iPos;
}
this.changeColor();
},
changeColor : function() {
var curHeight = this.drag.style.pixelTop, totalHeight = this.outerLyrHeight - this.dragHeight;
var value = Math.round((curHeight * 255) / totalHeight);
if (this.flag == 1) {
this.r = this.getHex(value);
} else if (this.flag == 2) {
this.g = this.getHex(value);
} else if (this.flag == 3) {
this.b = this.getHex(value);
}
this.obj.style.backgroundColor = "#" + this.r + this.g + this.b;
},
getHex : function(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else {
var str = "0" + i.toString(16);
return str.substring(str.length - 2);
}
},
stop : function() {
removeEventHandler(document, "mousemove", this.fM);
removeEventHandler(document, "mouseup", this.fS);
}
};
//-->
</script>
分享到：
相关推荐
通过点击“颜色选择”按钮，动态设置static和edit控件的字体和背景颜色，适合有一定MFC编程基础的人。
改变控件的背景颜色（LISTBOX） 改变
改变树控件背景颜色的VC源代码
CListCtrl控件背景颜色网格色彩，用CListCtrl来显示数据比较方便，有时候我们需要标注某一列或某一个单元格的背景和字体颜色，或者需要改变一下行高和字体大小，CListCtrl要改变这些并不是很方便。本文将介绍如何...
ListControl，重写ListControl控件类，可以根据自己的需要修改控件表头颜色。在VC6.0下调试成功。
改变EditControl控件的背景颜色 在参数文本框中输入数值，如果当前值为奇数，则状态文本框背景色为绿色，文本内容为在线；否则，状态文本框背景色为红色，文本内容为离线。默认情况下，状态文本框背景色为红色，文本...
在网上找了很久没找到可以改变标签颜色的例子，就按网上的方法做了个例子，可以改变标签和背景的颜色，做成和主框背景色一样。有需要的可以拿去参考。
修改MFC中Button控件控件字体、字体大小、背景色、背景图片，主要方法采用需要通过button类派生Mybutton类，然后重载其中DrawItem函数
mfc 中列表控件头的设置（背景颜色，字体大小等） 以前的是有内存泄露的. 这里的修改了一下.. 没有内存泄露
扩展MFC编辑框控件的功能，修改编辑框背景颜色，文字格式，以及边框颜色等
本程序用于修改list控件的颜色，list控件颜色不太好修改，使用改程序相当于对list控件从新画了。
一个简单的MFC应用程序，主要实现改变对话框的背景颜色、运用ActiveX控件，其中有日历等。
一、改变视图背景色： 1 二、改变对话框背景色： 1 三、窗口居中： 2 四、设置初始窗口状态： 2 五、对话框透明特效： 2 六、设置对话框里的STATIC控件颜色属性： 3 七、使窗口的最大化和最小化按钮消失： 3 八、...
修改Edit控件的背景，和字体颜色，很简单，非常适合初学者
一款还不错的日历控件，简单易懂的，这个主要是颜色的修改
如果要改变CButton按钮的文字颜色，靠上面的方式是不行的。我们需要创建一个新的从CButton类继承的CTestBtn类，并添加一个类的DrawItem的虚函数。
创建了一个基于CButton的新类，重载了DrawItem函数，实现了对按钮控件背景颜色的动态改变。
C＃ TabConTrol控件背景颜色问题 PDF
在VC编程中要改变控件（诸如CView, CFrameWnd, or CWnd等）的背景色可通过处理特定的消息来实现。但如果想改变按钮的颜色,就只能使用自绘制的按钮(也可以用位图按钮，此处未做说明)而不能通过OnCtlColor()改变。
使日期控件具有更改背景色的属性,在使用时要调用Invalidate()方法