动态改变背景颜色的小控件
可以通过样式修改控件的位置及控件大小,可以通过参数指定要改变背景颜色的目标对象,如果不指定,则默认改变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>