Question

我是前端网络开发的新手，我已经完成了一项任务，即创建一个链接到灯泡的滑块，根据滑块的操作方式产生调光和增亮的效果。任何人都可以帮我这个。

Answer 1

虽然您必须做一些花哨的CSS来获取位于div后面的灯泡的图像并且颜色在其中，但我已经做了一个基本的例子，您可以在这里查看：{{3 }}

基本上，你创建了两个div，使用css设置了宽度和高度的样本（未在下面显示）：

<div id="yellow"></div>
<div id="swatch"></div>

然后使用jQuery将其中一个作为滑块：

$("#yellow").slider({
  orientation: "horizontal",
  range: "min",
  max: 255,
  value: 127,
  slide: refreshSwatch,
  change: refreshSwatch
});

现在每次改变滑块的位置时都会调用函数refreshSwatch。我们可以使用此函数来更改样本的不透明度：

function refreshSwatch() {
  var yellow = $("#yellow").slider("value");
  var alpha = yellow / 255;
  $("#swatch").css("background-color", "rgba(255, 255, 0, " + alpha + ");");
}

让色板显示在灯泡的图像上将是困难的部分，但我会把它留给你。

为灯泡调光效果创建黄色滑块

1 个答案: