JavaScript-PC端特效(京东放大镜效果)

一、元素偏移量 offset 系列

1. offset 概述
   

2. offset 与 style 区别

3. 案列 ： 获取鼠标在盒子内的坐标

4. 案例 ： 模态框拖拽

5. 案列 ： 仿京东放大镜js 核心代码：

window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function (e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        // x- mask.offsetwidth / 2 是为了 让鼠标在盒子中间显示 类似于之前做的案例精灵天使
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})

二、元素可视区 client 系列

1. 案例 ：淘宝 flexible.js 源码分析

三、元素滚动 scroll 系列

1. 元素 scroll 系列属性

2. 页面被卷去的头部

3. 案例 ： 仿淘宝固定右侧侧边栏

4. 三大系列总结

四、动画函数封装 （重点）

1. 动画实现原理

2. 动画函数简单封装

3. 动画函数给不同元素记录不同定时器

4. 缓动效果原理

5. 动画函数多个目标值之间移动

6. 动画函数添加回调函数

7. 动画函数封装到单独JS文件里面

五、常见网页特效案例

1. 网页轮播图
   
   

2. 节流阀

3. 返回顶部

4. 筋斗云案列
   六、有关案列的源码以及资料链接：

https://gitee.com/pop–sheep/java-script-pc-special-effects/tree/master/