2013-04-28 92 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來改變它的樣式屬性。