php - 如何通过 JavaScript slider 实时更改 CSS 颜色值？

Question

我正在创建一个页面，用户可以在其中获取从 0 到 100 的 javascript slider ，并可以使用它来设置页面上 div 的不透明度。

我希望该 div 的不透明度在 slider 工作时实时变化。我以前没有这样做过。什么是最好的方法？

slider 中的光标会在您移动时显示 slider 的当前值。似乎我只需要找到一种方法在页面上的任意其他位置显示该值，以便我可以在 div 的样式设置中显示它。

生成 slider 的 .js 文件有一行(我认为)正在设置光标中的当前值:

$(this).children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

要让这个不断变化的数字同时显示在其他地方，我是否只需要在某处添加一个 div，然后像这样添加一行？

$("#newDivId").children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

这似乎会给我显示在 div 中的数字。那么我如何将它变成可以放入 div 样式设置的表单？

如果这是一个 php 变量，我会这样做，

style="opacity:<?php print $value ?>;"

什么是 .js 等价物？

Answer 1

jQuery UI 文档有一个 colorpicker with the slider widget 的例子.您应该能够理解它并调整它的不透明度。

这是我使用颜色选择器示例作为基础组合在一起的一个工作示例:http://jsfiddle.net/6VgzT/