16-网页特效offset/client/scroll - 《JavaScript 基础 & jQuery 使用》

//页面加载完毕之后 再执行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). 减去盒子自身高度的一般，让鼠标位于盒子中心
        // (3). 我们mask 移动的距离
        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';
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        var bigImg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 大图片的最大移动距离
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})

flexible.js

Scroll 是内容高度和宽度的大小（包含内边距，但不包含边框）

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        // 1. 获取元素
        var sliderbar = document.querySelector('.slider-bar'); //侧部导航栏
        var banner = document.querySelector('.banner');
        // console.log(banner.offsetTop); //到带有定位的父盒子上方的偏移
        // banner.offsetTop 就是被卷去的头部
        var bannerTop = banner.offsetTop;
        // 当我们侧边栏 固定定位后 应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack')
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function () {
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3. 当我们页面被卷去的头部大于等于了172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
        goBack.addEventListener('click', function () {
            //滚动条返回顶部
            window.scrollTo(0, 0);
        })
    </script>
</body>