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