getBoundingClientRect的快速理解
getBoundingClinetRect: 獲取某一個元素相對視窗的位置集合（它是一個方法，返回一個對象集合）
位置集合主要包括 { top, left, right,bottom } 等屬性
用法： Obeject.getBoundingClinetRect() （這裏的Obeject代表的想要獲取該元素的位置集合的DOM元素）
eg: var pos = Obeject.getBoundingClinetRect()
var left = pos.left // 獲取該元素左邊相對屏幕左邊的位置
var right = pos.right// 獲取該元素右邊相對屏幕左邊的位置
var bottom = pos.bottom// 獲取該元素下邊相對上邊屏幕的位置
var top= pos.top// 獲取該元素上邊相對屏幕上邊的位置
兼容性問題： 在低版本IE瀏覽器中會多出2px
兼容性寫法：
eg: var pos = Obeject.getBoundingClinetRect()
var htmlLeft = document.documentElement.clientLeft
var htmlTop = document.documentElement.clientTop
var left = pos.left - htmlLeft // 獲取該元素左邊相對屏幕左邊的位置
var right = pos.right - htmlLeft // 獲取該元素右邊相對屏幕左邊的位置
var bottom = pos.bottom - htmlTop // 獲取該元素下邊相對屏幕上邊的位置
var top= pos.top - htmlTop // 獲取該元素上邊相對屏幕上邊的位置
因為現代瀏覽器中document.documentElement.clientTop 和 document.documentElement.clientLeft 都為0，
在低版本瀏覽器中 document.documentElement.clientTop 和 document.documentElement.clientLeft 都為2px
所以很好的解決了兼容性問題
getBoundingClientRect的快速理解