jquery仿ps颜色拾取功能

当我们需要在Web页面上使用颜色选择器时，jQuery颜色选择器是一个很好的选择。在实现该功能之前，需要确保已经下载并引入jQuery库。接下来，我们可以按照以下步骤实现“jQuery仿PS颜色拾取功能”。

步骤一：创建HTML

首先，我们需要为颜色选择器创建一个基本的HTML结构，包含颜色区域、拾色器和反显框。

<div class="color-picker">
  <div class="color-area"></div>
  <div class="picker"></div>
  <div class="highlight"></div>
</div>

在上面的代码中，.color-area是用于显示选中颜色的区域，.picker是拾色器，.highlight则是用于反显选中位置的框。

步骤二：创建CSS

接下来，我们需要为颜色选择器添加基本的样式。

.color-picker {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.color-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.picker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  cursor: crosshair;
}
.highlight {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  pointer-events: none; /* 防止框阻挡鼠标事件 */
}

在上面的代码中，我们创建了.color-picker的基本样式，包括它的位置、大小和边框。.color-area和.picker都使用了“绝对定位”，.highlight则是一个边框为1px黑色方框。

步骤三：实现颜色选择器

接下来，我们需要使用JavaScript来添加基本的行为和交互。

$(function () {
  var $picker = $(".picker");
  var $highlight = $(".highlight");
  var $colorArea = $(".color-area");
  var pickerWidth = $picker.width();
  var pickerHeight = $picker.height();
  var areaWidth = $colorArea.width();
  var areaHeight = $colorArea.height();
  var areaOffset = $colorArea.offset();
  var dragging = false;

  // 当鼠标按下时，使拾色器跟随鼠标移动
  $picker.mousedown(function (e) {
    dragging = true;
    updatePicker(e);
    e.preventDefault();
  });

  // 当鼠标移动时，更新拾色器位置
  $(document).mousemove(function (e) {
    if (dragging) {
      updatePicker(e);
    }
  });

  // 当鼠标松开时，停止跟随鼠标移动
  $(document).mouseup(function () {
    dragging = false;
  });

  // 更新拾色器位置和颜色
  function updatePicker(e) {
    var left = e.pageX - areaOffset.left - pickerWidth / 2;
    var top = e.pageY - areaOffset.top - pickerHeight / 2;

    left = Math.max(0, Math.min(left, areaWidth - pickerWidth));
    top = Math.max(0, Math.min(top, areaHeight - pickerHeight));

    $picker.css({
      left: left,
      top: top
    });

    // 计算鼠标位置对应的颜色值
    var hue = left / areaWidth * 360;
    var saturation = 1 - top / areaHeight;
    var lightness = 0.5;
    var rgba = "hsla(" + hue + "," + saturation * 100 + "%," +
      lightness * 100 + "%, 1)";

    // 更新颜色区域和反显框
    $colorArea.css("background-color", rgba);
    $highlight.css({
      "border-color": invertColor(rgba),
      "top": top,
      "left": left
    });
  }

  // 反转颜色
  function invertColor(color) {
    var hex = color.slice(1);
    hex = hex.length === 3 ? hex.replace(/./g, "$&$&") : hex;
    var rgb = parseInt(hex, 16);
    var r = (rgb >> 16) & 0xff;
    var g = (rgb >> 8) & 0xff;
    var b = rgb & 0xff;
    var inverted = ((255 - r) << 16 | (255 - g) << 8 | (255 - b)).toString(16);
    return "#" + ("000000" + inverted).slice(-6);
  }
});

在上面的代码中，我们创建了$input和$preview两个变量以便获取和操作HTML元素，实现了鼠标的拖拽和颜色反选，具体实现方式可以查看代码注释。

示例一：网页标题颜色变化

// 更新页面标题颜色
$("input").on("change", function() {
  $("h1").css("color", $(this).val());
});

// 初始化页面标题颜色
$(document).ready(function() {
  $("h1").css("color", $("input").val());
});

在上面的代码中，我们监听input元素的颜色变化事件，当颜色值发生变化时，将页面标题的颜色设置为当前颜色值。

示例二：显示颜色值

// 显示颜色值
$("input").on("change", function() {
  $("#hex").text($(this).val());
});

// 初始化颜色值
$(document).ready(function() {
  $("#hex").text($("input").val());
});

在上面的代码中，我们监听input元素的颜色变化事件，当颜色值发生变化时，将当前颜色值显示在页面中。

通过上面的两个示例，我们可以看到如何在具体的Web应用中使用这个颜色选择器。