2013-04-28 64 views
0

不知道如何说出那个标题,但我想知道如何将元素样式更改与事件(例如滑块)绑定以显示效果发生时的效果...将元素CSS的实时更改绑定为元素,因为它已更改?

示例1 :如果我有一个滑块来改变一个div的不透明度,我将如何创建一个滑块,该滑块从0开始到1结束于元素不透明度,2)观察滑块的位置并将元素的不透明度更改为它是来回拖动?示例2:如果我有一个彩色贴图来设置元素的背景颜色,我将如何获取光标所在颜色的十六进制,以及2)在光标移过颜色贴图时观察光标并在地图上移动时实时更改元素的颜色?

+0

每次更新.style值时,浏览器都会触发重绘事件。所以实时更新已经处理完毕。现在对于一个稍微复杂一点的滑块。 – 2013-04-28 01:18:07

回答

0

使用Javascript/JQuery,你可以将一个函数绑定到一个事件。例如,你可以使用JQuery slider和简单的功能结合到其change事件和具有的功能修改元素的不透明度,象这样:

$("sliderElement").slider({ 
    change: function(event, ui){ 
     $("opacityElement").css('opacity', ui.value); 
    } 
} 

每当改变元素的CSS样式,浏览器将重新绘制它。所以,只要你需要改变外观,只需使用javascript来改变它的样式属性。