放大镜

mac2022-06-30 30

一. 放大镜优化案例：（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)

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

转载于:https://www.cnblogs.com/yangjingyang/p/10210482.html