获取鼠标点击坐标等__颜色选择器的制作

获取鼠标点击坐标等__颜色选择器的制作

效果图：

做该效果的难点是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();

});