獲取滑鼠點選座標等__顏色選擇器的製作

效果圖：

做該效果的難點是js實現點選顏色選擇器跟隨滑鼠移動。 這裡使用jQuery實現該效果

1. 編寫html頁面，放置頁面所需要的元素。Index.html部分程式碼

2.css樣式

因為顏色選擇器要實現的是隨著滑鼠拖動移動的效果，所以初期需要將顏色選擇器的position屬性設定為absolute

3.js動態效果

獲取顏色選擇器選中的顏色: $(this).css(“background-color”)

點選該顏色，將其賦值給要改變顏色的div :  editableDiv.css(“color”,bgcolor);

最後，解除滑鼠移動和擡起事件：

特別注意：

獲取滑鼠按下的地方的座標：

dragarea.mousedown(function(e){ // e表示滑鼠點選事件

var x = e.clientX;

var y = e.clientY;

//獲取指定div盒子的座標，距離瀏覽器視窗左邊和頂部的距離

var oleft = dragarea.offset().left;

var otop = dragarea.offset().top;

//獲取瀏覽器視窗的寬度和高度

$(window).width();

$(window).height();

});