找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发jQuery制作一款简单的拾色器

2018-10-13 21:47:10 分类：jQuery 阅读(291) 评论(0)

前端开发应会技能 前端开发，必备的ＰＳ技能 web前端开发技能点

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <script src=”https://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <script>
        var self;
        function ColorBar(e, width, height, result, textObj) {
            this.e = e;
            this.width = width;
            this.height = height;
            this.result = result;
            this.textObj = textObj;
            self = this;
        };
        ColorBar.prototype.getChooseColor = function () {
            return colorChoose;
        }
        ColorBar.prototype.drawPanel = function () {
            var e = $(this.e);
            var left = e.position().left;
            var top = e.position().top;
            var deltaC = 0;
            for (var x = 0; x < this.width; x++) {
                deltaC = (x – 0) * 255 * 6 / (this.width);
                var colorPx = $(“<div></div>”);
                e.append(colorPx);
                colorPx.click(function () {
                    var bgColor = $(this).css(“background-color”);
                    $(self.result).css(“background-color”, bgColor);
                    $(self.textObj).text(bgColor);
                });
                colorPx.css({
                    “position”: “absolute”,
                    “left”: x + left,
                    “top”: 0 + top,
                    “width”: 1,
                    “height”: this.height,
                    “cursor”: “crosshair”
                });
                if (deltaC >= 0 && deltaC <= 255) {
                    r = 255;
                    g = 0;
                    b = 0;
                    colorPx.css(
                        “background-color”, “rgb(” + r + “,” + (g + deltaC) + “,” + b + “)”
                    );
                }
                if (deltaC > 255 && deltaC <= 255 * 2) {
                    r = 255;
                    g = 255;
                    b = 0;
                    colorPx.css(
                        “background-color”, “rgb(” + (r – deltaC + 255) + “,” + g + “,” + b + “)”
                    );
                }
                if (deltaC > 255 * 2 && deltaC <= 255 * 3) {
                    r = 0;
                    g = 255;
                    b = 0;
                    colorPx.css(
                        “background-color”, “rgb(” + r + “,” + g + “,” + (b + deltaC – 255 * 2) + “)”
                    );
                }
                if (deltaC > 255 * 3 && deltaC <= 255 * 4) {
                    r = 0;
                    g = 255;
                    b = 255;
                    colorPx.css(
                        “background-color”, “rgb(” + r + “,” + (g – deltaC + 255 * 3) + “,” + b + “)”
                    );
                }
                if (deltaC > 255 * 4 && deltaC <= 255 * 5) {
                    r = 0;
                    g = 0;
                    b = 255;
                    colorPx.css(
                        “background-color”, “rgb(” + (r + deltaC – 255 * 4) + “,” + g + “,” + b + “)”
                    );
                }
                if (deltaC > 255 * 5 && deltaC <= 255 * 6) {
                    r = 255;
                    g = 0;
                    b = 255;
                    colorPx.css(
                        “background-color”, “rgb(” + r + “,” + g + “,” + (b – deltaC + 255 * 5) + “)”
                    );
                }
            }
        }
        $(function () {
            var colorBar = new ColorBar(“#color_panel”, 255 * 3, 165, “#color_result”, ‘#colorText’);
            colorBar.drawPanel();
        });
    </script>
</head>
<body>
    <p class=”color_text”>请选择颜色:</p>
    <div id=”color_panel” style=”width:765px;height:165px;”></div>
    <p class=”color_text”>
        您选择的颜色为:
        <span id=”colorText”></span>
    </p>
    <div id=”color_result” style=”width:765px;height:50px”></div>
</body>
</html>

web前端开发职业技能 前端开发技能瀑布流 前端开发总监 行业技能

» 本文来自：前端开发者 » 《前端开发jQuery制作一款简单的拾色器》
» 本文链接地址：https://www.rokub.com/6119.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论