如何通过javascript滑块实时更改CSS颜色值？

Question

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

我希望该div的不透明度能够在滑块工作时实时更改.我以前没有这样做过.什么是最好的方法？

滑块中的光标在移动时显示滑块的当前值.似乎我只需要找到一种在页面上任意其他位置显示该值的方法,这样我就可以在div的样式设置中显示它.

生成滑块的.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文档中有一个带滑块小部件的颜色选择器示例.你应该能够理解它并使其适应不透明度.

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