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