之前曾經(jīng)看過(guò)一份完善過(guò)一份截圖插件的代碼，整個(gè)邏輯感覺(jué)有點(diǎn)復(fù)雜。該份代碼的特點(diǎn)是：變量太多(而且是別人定義的變量)，組織的邏輯理解起來(lái)有點(diǎn)困難。
最近，又想到了這份東西，所以便萌生了自己嘗試這獨(dú)立實(shí)現(xiàn)的念頭，也借此回顧下，簡(jiǎn)單動(dòng)畫(huà)，拖拽，縮放功能的實(shí)現(xiàn)，以及位置關(guān)系的一些原生js的一些知識(shí)點(diǎn)。
開(kāi)始寫(xiě)前，先進(jìn)行下知識(shí)點(diǎn)的回顧吧。
位置關(guān)系
| 方法 | 描述 |
|---|---|
| Element.clientTop | 返回element上邊框的寬度值 |
| Element.clientLeft | 返回element左邊框的寬度值 |
| Element.offsetParent | 返回element第一設(shè)置了position（且value!=static）的父元素，如果一直找不到，最后會(huì)返回root element，在標(biāo)準(zhǔn)模式下為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 | 返回鼠標(biāo)的事件發(fā)生是鼠標(biāo)所在的X軸位置 |
| event.clientY | 返回鼠標(biāo)的事件發(fā)生是鼠標(biāo)所在的Y軸位置 |
//滾輪事件
addEvent(ele,'mousewheel',function (event){
event = getEvent(event);
if (event.wheelDelta>0) {
//向上滾動(dòng)
//滾動(dòng)一周為120
}
if (event.wheelDelta<0) {
//向下滾動(dòng)
}
});
//firefox
addEvent(ele,'DOMMouseScroll',function (event){
if (event.detail>0) {
//向下滾動(dòng)
//滾動(dòng)一周為3
}
if(event.detail<0){
//向上滾動(dòng)
}
})
關(guān)于鼠標(biāo)事件的全局捕獲
// 對(duì)鼠標(biāo)事件進(jìn)行捕獲
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外發(fā)生的mouseup事件，直接給document添加mouseup
addEvent(contentLeft,"mouseup",mouseup);
}
// 釋放捕獲事件
if (this.releaseCapture) {
this.releaseCapture()
removeEvent(contentLeft,"mouseup",mouseup);
}else{
removeEvent(document,'mouseup',mouseup);
}
最后是設(shè)計(jì)圖
可能字丑了點(diǎn)（尷尬）
screenshoot.jpg
完成后
finished.jpg
然后。。。。
其實(shí)我并不打算講代碼，畢竟在寫(xiě)代碼的時(shí)候該有的注釋都寫(xiě)了，所以大家如果有興趣的話，可以看下我放在github下的源碼
