放大镜

一. 放大镜优化
案例：（01.放大镜的优化.html）
结构：
<div class="div1">
<div class="div2">
<div class="smallPic" id="smallPic">
<img src="">
<div class="zoom" id="zoom"></div>
</div>
</div>
</div>
<div class="bigPic" id="bigPic"></div>
样式：
smallPic
宽、高、边框、外边距、定位
smallPic zoom
定位、位置、不可见、宽、高
背景色、透明度、鼠标形状
bigPic
宽、高、定位、位置、边框、不可见
div1
宽、高、定位、位置、背景色
div2
宽、高、定位、位置、背景色
js：
计算smallPic到body左边缘的距离
smallPic.offsetLeft + div2.offsetLeft + div1.offsetLeft
上面的算法不通用，下面的可以实现通用性

function getAllLeft(obj){
1）定义存放最终smallPic到body左边缘距离的变量allLeft
2）获取obj的offsetLeft值赋给变量allLeft
3）定义正在查找的元素currentObj
4）循环获取currentObj的具体具有定位的父元素，获取一个就将它的offsetLeft属性值加给allLeft，获取父元素（currentObj.offsetParent）
5）方法最终返回循环结束后的allLeft
}
function getAllTop(obj){

}
二. 延迟加载
主要用于图片的延迟加载
延迟加载就是图片的显示延迟进行
延迟加载分析：
布局分析：
给定所有的图片标签，但是src属性没有值，所以不会加载图片，自定义属性as给定这个图片的地址。
技术分析：
当页面卷屏高度达到一定高度时，将as属性值赋给src瞬间加载图片。
技术要点：
1）计算卷去的距离（scrollTop）
2）计算浏览器的高度（document.documentElement.clientHeight）
3）计算须要加载的图片的offsetTop
当满足下面条件时就加载图片
scrollTop >= 图片.offsetTop - body.clientHeight
注意：浏览器的scrollTop兼容的获取方式如下：
var sTop = document.documentElement.scrollTop || document.body.scrollTop
案例：（02.延迟加载.html）
结构：
<div id="top">
头部
</div>
<div id="box">
<h3>图片欣赏</h3>
<img src="" as="shuzi/0.png">
。。。。。。
</div>
样式：
top
高度，背景色
img
宽、高、浮动
js：
1）为window添加滚动事件
2）事件处理程序实现如下：
获取scrollTop及clientHeight
遍历所有图片，看哪些图片满足下面的关系
scrollTop >= 图片到浏览器顶部的距离 -
document.documentElement.clientHeight
如果满足，就让这些图片加载，加载过程就是获取as属性值，再将属性值赋给src
注意：图片到浏览器顶部的距离需要通过函数实现（累加计算）
3）定义函数getAllTop(obj)

作业：实现商品图片的放大镜效果
要求：下面的小图标实现滑动轮播效果