前端开发者前端开发应会技能 前端开发，必备的ＰＳ技能 web前端开发技能点
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<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
评论前必须登录！
注册