Web API (window裏面的內置對象) 、 （三大系列）、（自調用函數）、（拖拽的模態框）、（放大鏡效果）

一 、window裏面的內置對象  :

1.  location :

location屬性用於獲取或設置    窗體的URL ，能夠解析UrL  ，這個屬性返回的是location對象 ；

URL語法格式  ：

 

 

 

 

 

(1)　　location . href  :只要是賦值用來跳轉頁面的 ，獲取的是地址欄的 url ；

(2)　　location . search :獲取 url 後面的參數  ？後面的都是參數  ；

(3)　　location . reload () 刷新 ，不寫參數或者寫 false 表明的是普通刷新 ，

　　　　　　　　　　　　有緩存就用緩存 ，沒有緩存就去請求服務器 ，

　　　　　　　　　　　　設置true強制刷新 ，直接請求服務器 ；

(4)　　location . assign () 跳轉頁面  ；

(5)　　location . replace () 跳轉 ，不存在歷史記錄中 ，就不能進行回退  ；

(6)　　substr（'起始位置' ，截取幾個字符）；

(7)　　split （'  '）利用什麼分割成數組 ；

 

 

 

 

2.　navigation ：

(1)　　userAgent  獲取的是客服端的類型  （瀏覽器  、手機 、平板、）；

（2）判斷用戶在哪一個終端打開 ：

 

 

3.　history ：

(1)　　history . forward （）前進 ；

(2)　　history . back （）後退 ；

(3)　　history . go ()  整數表明的是前進 ，負數表明的是後退 ；

 

二 、三大系列 ：

1.offset系列 ：

（1）element . offsetTop |  offsetLeft    ；獲取的是元素的偏移量 ，參照的是帶有定位的父輩元素 ，若是父輩元素沒有定位 ，參照的是 body ；

（2）element . offsetWidth |  offsetHeight   ；獲取的是元素的寬高 ，padding + border + 內容   ；

（3）element . offsetParent  ；獲取的是帶有定位的最近的父輩元素 ，若是父輩元素都沒有定位 ，那麼獲取的是body  ；

2.client新列 ：

（1）element . clientLeft |  clientTop   ；獲取的是左邊框 |  上邊框的高度   ；

（2）element . clientWidth |  clientHeight   ；獲取的是元素的寬高 ，padding + 內容  ；

 

三 、自調用函數  ：

（1）（  function（ ）{}  ）（   ） ；

（2）好處 ：防止命名污染  ；

 

四 、拖拽的模態框 ： 

1. 先獲取到按鈕的對象 ，獲取登陸窗口的對象 　；

2.給按鈕註冊點擊事件   （讓登陸窗口進行顯示）；

3.獲取叉叉的按鈕 ，而且註冊點擊事件  （讓登陸窗口進行隱藏） ；

4.給登陸框註冊一個 鼠標按下事件  mousedown  ：

　　（1）我要獲取鼠標在盒子中的距離  = 鼠標在頁面的距離 - 登陸窗口距離頁面的距離  ；

　　（2）我還要給 document 對象綁定一個鼠標移動事件 ：

　　　　   a ：在移動事件裏面獲取鼠標在頁面中的位置   ；

　　　　   b ：用這個值 - 鼠標在盒子中的移動的距離   ；

　　　　   c ：把這個值賦值給 登陸窗口  ；

5.還須要給 document 綁定一個鼠標擡起事件 mouseup   （註銷 移動事件 ）；

 

 

五 、放大鏡效果  :

 

1.獲取相關元素對象 （preview_img  (大盒子) ，mask（遮罩），bigImg（大圖片））；

2.給 大盒子註冊 鼠標移入和鼠標移出事件 ：

（1）移入事件裏面 ，讓遮罩和大圖片進行顯示 ；

（2）移出事件裏面 ，讓遮罩和大圖片進行隱藏 ；

3.在移入事件裏面  ；

　　（1）獲取到當前鼠標在  大盒子中的位置 ；

　　（2）拿到鼠標在盒子中的位置後 ，X座標 - 盒子的寬度 ，Y軸座標 - 盒子的高度 ，此時鼠標纔在盒子的中間  ；

　　（3）作邊界的校驗   水平方向有一個最小值和最大值 ， 垂直方向有一個最小值和最大值 ：

　　　　　a :最小值 就是0  ，最大值就是 ：大盒子的寬度 - 遮罩的寬度 ；

　　　　　b ：若是說當前的偏移量小於 0 ，那麼我就讓這個偏移量等於 0  ；

　　　　　c ：若是說當前的偏移量大於  最大值 ， 那麼我就讓這個偏移量等於這個最大值 ；

　　（4）把校驗的這個值 設置給 遮罩 的 left 和top 的偏移量  ；

　　（5）遮罩在移動的時候，大圖應該也會相應的移動，他們移動的不是相等的像素，而是存在一個比例關係 ：

　　　　　a ：遮罩移動的距離 / 遮罩能移動的最大距離  =  大盒子移動的距離 / 大盒子能移動的最大距離  ；

　　　　　b ：大盒子的移動距離 = 遮罩移動的距離 / 遮罩能移動的最大距離  * 大盒子能移動的最大距離  ；

　　　　　c ：在這個公式裏面， 直接能夠用的有： 遮罩移動的距離，遮罩能移動的最大距離  ；

　　　　　d ：大盒子能移動的最大距離與咱們算遮罩移動最大距離是同樣的  ；

　　　　　e ：設置給 大圖片的left 和 top 偏移量便可    值 是負值，由於大圖片是往左走 ；