一. 鼠标指针应用
案例：（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属性。