js开发实例 —— 仿京东放大镜效果&仿淘宝侧边栏

二十三、仿京东放大镜效果

整体思路：

① 整个案例可以分为三个功能模块。

② 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能。

③ 黄色的遮挡层跟随鼠标功能。

④ 移动黄色遮挡层,大图片跟随移动功能。

移动思路：

①黄色的遮挡层跟随鼠标功能。

②把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。

③首先是获得鼠标在盒子的坐标。

④之后把数值给遮挡层做为left和top值。

⑤此时用到鼠标移动事件,但是还是在小图片盒子内移动。

⑥发现，遮挡层位置不对,需要再减去盒子自身高度和宽度的一半。

⑦遮挡层不能超出小图片盒子范围。

⑧如果小于零,就把坐标设置为0 。

⑨如果大于遮挡层最大的移动距离,就把坐标设置为最大的移动距离

⑩遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度

大图移动思路：

①移动黄色遮挡层,大图片跟随移动功能。

②求大图片的移动距离公式

遮挡层移动距离 / 大图片移动距离 = 遮挡层最大移动距离 / 大图片最大移动距离

JS代码：

二十四、仿淘宝侧边栏

1.原先侧边栏是绝对定位。

2.当页面滚动到一定位置,侧边栏改为固定定位。

3.页面继续滚动,会让返回顶部显示出来。

思路：

①需要用到页面滚动事件scroll因为是页面滚动,所以事件源是document 。

②滚动到某个位置,就是判断页面被卷去的上部值。

③页面被卷去的头部:可以通过window.pageoffset获得如果是 被卷去的左侧window. pageXffset 。

④注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部则是window.pageYoffset 。

HTML 代码：

JS 代码：