一. 滑鼠指標應用
案例：（01.拖拽效果.html）
1) 新增小球的滑鼠按下事件
事件處理函式實現如下：
1）獲取當前滑鼠點在小球的位置(deliaX, deliaY)
2）為矩形新增滑鼠移動事件
2）矩形元素的滑鼠移動事件的處理
定義變數moveX，moveY存放小球left和top屬性值
moveX = pageX - 矩形.offsetLeft - deliaX
moveY = pageY - 矩形.offsetTop - deliaY
3) 小球水平、垂直的邊界值實現
a. 如果moveX值小於等於0，則小球的left屬性值都是0
如果moveX值大於等於（矩形寬度 - 小球的寬度），則小球的left屬性值都是（矩形寬度 - 小球的寬度）
b. 垂直情況同a
4）滑鼠擡起，小球停止運動
新增滑鼠擡起事件，事件處理函式實現移出滑鼠的移動事件
練習：（02.拖拽效果的封裝.html）
將拖拽效果的實現封裝為一個函式：
function drag(ball){
ball.onmousedown = function(evt){
}
}
drag(ball1);
二. 京東放大鏡
案例：（03.放大鏡效果.html）
1. 結構
<div id="smallPic">
<img src="images/xiao.jpg">
<div id="zoom"></div>
</div>
<div id="bigPic"></div>
2. 樣式：
smallPic
寬、高、邊框、外邊距、定位
zoom
定位、寬、高、背景色、透明度、邊框
bigPic
寬、高、背景圖片、定位、位置、邊框
3. js
1）滑鼠進入smallPic時，顯示放大鏡和右側大圖
滑鼠離開smallPic時，隱藏放大鏡和右側大圖
2）滑鼠進入smallPic時，實現放大鏡的滑鼠跟隨效果
3）放大鏡移動時，右側顯示放大的內容
放大鏡移動175的距離，大圖移動400的距離，所以小圖移動1畫素，大圖移動400/175畫素
大圖移動使用backgroundPosition
bigPic.style.backgroundPosition = -moveX * 400/175 + 'px ' + -moveY * 400/175 + 'px';

作業：放大鏡實用
結構：
兩大塊：上邊和下邊
上邊：左邊和右邊
左邊：小圖和放大鏡
右邊：大圖
下邊：兩張小圖

<div id="main">
<div id="left">
<img src="images/image0.jpg" id="leftImg">
<div id="zoom"></div>
</div>
<div id="right">
<img src="images/images0.jpg">
</div>
</div>
<div id="viewImg">
<img src="images/image0.jpg">
<img src="images/image1.jpg">
</div>
樣式：
main
外邊距
left
寬、高、邊框、定位
leftImg
寬、高
zoom
定位、寬、高、背景色、透明度、滑鼠形狀、不可見
right
寬、高、不可見、內容隱藏
viewImg
上、左外邊距
viewImg img
寬
js：
1）計算放大鏡的尺寸
放大鏡尺寸:左側div尺寸 == 右側div尺寸:大圖的尺寸
2）計算放大的倍數
右側div的寬度/放大鏡的寬度
3）右側大圖移動的實現
改變div的滾動位置，設定兩個屬性
scrollLeft
scrollTop
4）點選下面小圖，上面左側及右側的圖片隨之改變
為每個小圖新增單擊事件
事件處理程式實現將當前單擊的小圖的src屬性值賦給上面左側及右側圖片的src屬性。