Dynamically changing the background color of the small control

Dynamically changing the background color of the small control

Style changes can control the position and control the size, you can change the background color parameter to specify the target audience, if not specified, the default background color to change the 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> Change the background color of the control  </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></div>
<div></div>
<script type="text/javascript">
<!--
var cp = new ColorPalette("idContainer", "idObj");
//-->
</script>
</body>
</html>

Insert the following JS code <head>:

<script type="text/javascript">
<!--
var $ = function(id) {
        return "string" == typeof id ? document.getElementById(id) : id;
};
//  Instantiate an object and calls the object's Initialize method
var Class = {
        create : function() {
                return function() {
                        this.initialize.apply(this, arguments);
                };
        }
};
// Register an event for an object
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;
        }
};
//  Log off event for an object
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><div></div><div><div></div></div></div>';
                var outerLyr1 = '<div><div></div><div><div></div></div></div>';
                var outerLyr2 = '<div><div></div><div><div></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);

                //  Calculates and sets the color values during initialization
                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;

                //  Register the event
                this.drag = rDrag;
                this.outerLyr = rOuterLyr;
                this.flag = 1; //  Tag is to modify the r, g, b values  (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; //  Down
                } else {
                        this.dir = 1; //  The up
                }

                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>
分类:Web 时间:2010-03-15 人气:232
本文关键词:
分享到:
blog comments powered by Disqus

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.118 (s). 12 q(s)