之前曾经看过一份完善过一份截图插件的代码，整个逻辑感觉有点复杂。该份代码的特点是：变量太多(而且是别人定义的变量)，组织的逻辑理解起来有点困难。
最近，又想到了这份东西，所以便萌生了自己尝试这独立实现的念头，也借此回顾下，简单动画，拖拽，缩放功能的实现，以及位置关系的一些原生js的一些知识点。
开始写前，先进行下知识点的回顾吧。
位置关系
| 方法 | 描述 |
|---|---|
| Element.clientTop | 返回element上边框的宽度值 |
| Element.clientLeft | 返回element左边框的宽度值 |
| Element.offsetParent | 返回element第一设置了position（且value!=static）的父元素，如果一直找不到，最后会返回root element，在标准模式下为html在怪异模式下为body |
| Element.offsetTop | 返回element上边框到element.offsetParent上边框的距离 |
| Element.offsetLeft | 返回element左边框到element.offsetParent左边框的距离 |
| Element.offsetWidth | 返回element的宽度,include :content,padding,border |
| Element.offsetHeight | 返回element的高度,include :content,padding,border |
| event.clientX | 返回鼠标的事件发生是鼠标所在的X轴位置 |
| event.clientY | 返回鼠标的事件发生是鼠标所在的Y轴位置 |
//滚轮事件
addEvent(ele,'mousewheel',function (event){
event = getEvent(event);
if (event.wheelDelta>0) {
//向上滚动
//滚动一周为120
}
if (event.wheelDelta<0) {
//向下滚动
}
});
//firefox
addEvent(ele,'DOMMouseScroll',function (event){
if (event.detail>0) {
//向下滚动
//滚动一周为3
}
if(event.detail<0){
//向上滚动
}
})
关于鼠标事件的全局捕获
// 对鼠标事件进行捕获
if (this.setCapture) {
this.setCapture();
} else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
// 释放捕获事件
if (this.releaseCapture) {
this.releaseCapture()
} else if(window.releaseEvents){
// 但不知为何在chrome下Event.MOUSEUP= undefined,故不起作用
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//采用的解决方案
if (this.setCapture) {
this.setCapture();
}
if(!this.setCapture){
addEvent(document,"mouseup",mouseup);
}else{
// 为了能够捕获在contentLeft外发生的mouseup事件，直接给document添加mouseup
addEvent(contentLeft,"mouseup",mouseup);
}
// 释放捕获事件
if (this.releaseCapture) {
this.releaseCapture()
removeEvent(contentLeft,"mouseup",mouseup);
}else{
removeEvent(document,'mouseup',mouseup);
}
最后是设计图
可能字丑了点（尴尬）
screenshoot.jpg
完成后
finished.jpg
然后。。。。
其实我并不打算讲代码，毕竟在写代码的时候该有的注释都写了，所以大家如果有兴趣的话，可以看下我放在github下的源码
