【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

原创

像素人

发布于 2023-12-26 17:43:32

4400

发布于 2023-12-26 17:43:32

文章被收录于专栏：如果你要学JS如果你要学JS

1.如何实现放大镜效果

思维整理：

1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能
2.黄色的遮挡层跟随鼠标功能。
3.移动黄色遮挡层,大图片跟随移动功能。

html，css代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/放大镜.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .one {
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
            width: 400px;
            height: 500px;
            border: 1xp solid black;
        }
 
        .one img {
            width: 100%;
            height: 100%;
        }
 
        .yel {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: rgb(252, 252, 112, .5);
            cursor: crosshair;
        }
 
        .big {
            display: none;
            position: absolute;
            margin-top: 100px;
            margin-left: 100px;
            width: 600px;
            height: 600px;
            top: 0;
            left: 410px;
            background-color: aqua;
            border: 1px solid cornsilk;
            overflow: hidden;
        }
 
        .big img {
            width: 1000px;
            height: 1000px;
        }
 
        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
 
<body>
 
    <div class="one">
        <img src="../img/迪迦.jpg" alt="">
        <!-- 添加遮挡层 -->
        <div class="yel"></div>
        <!-- 添加大盒子 -->
        <div class="big"><img src="../img/迪迦.jpg" alt="" class="bigImg"></div>
    </div>
</body>
<html>

js代码

window.addEventListener('load', function () {
    var one = this.document.querySelector('.one');
    var yel = this.document.querySelector('.yel');
    var big = this.document.querySelector('.big');
    // 当鼠标经过就显示和隐藏遮罩层和大盒子
    one.addEventListener('mouseover', function () {
        yel.style.display = 'block';
        big.style.display = 'block';
    })
    one.addEventListener('mouseout', function () {
        yel.style.display = 'none';
        big.style.display = 'none';
    })
    one.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
 
        // 给黄色的遮挡层一个鼠标在盒子内移动的坐标
        var yelX = x - yel.offsetWidth / 2
        var yelY = y - yel.offsetHeight / 2
        if (yelX <= 0) {
            yelX = 0;
        } else if (yelX >= one.offsetWidth - yel.offsetWidth) {
            yelX = one.offsetWidth - yel.offsetWidth;
        }
        if (yelY <= 0) {
            yelY = 0;
        } else if (yelY >= one.offsetHeight - yel.offsetHeight) {
            yelY = one.offsetHeight - yel.offsetHeight;
        }
        yel.style.left = yelX + 'px';
        yel.style.top = yelY + 'px';
 
        // 遮挡层移动距离=大图片最大移动距离/遮挡层的最大移动距离
        // 1.求出遮挡层的最大移动距离
        var yelMaxx = one.offsetWidth - yel.offsetWidth;
        var yelMaxy = one.offsetHeight - yel.offsetHeight;
        var bigImg = document.querySelector('.bigImg');
        // 大图片的移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 利用上面公式 可以得到大图片移动距离的XY值
        var bigX = yelX * bigMax / yelMaxx;
        var bigY = yelY * bigMax / yelMaxy;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
});

2.client系列属性

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性作用

element.clientTop 返回元素上边框的大小

element.clientLeft 返回元素左边框的大小

element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位

element.clientHeight 返回自身包含padding，内容的高度，不含边框，返回值不带单位

3. scroll系列属性

scroll系列属性作用

element.scrollTop 返回被卷去的，上侧距离,返回数值不带单位

element.scrolleft 返回被卷去的左侧距离，返回数值不带单位

element.scrollWidth 返回自身实际的宽度，不含边框,返回数值不带单位

element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位

如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为预面被卷去的头部。滚动条在滚动时会触发onscroll事件。

4.固定侧边栏

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 10px auto;
            width: 1000px;
            height: 500px;
            background-color: rgb(134, 225, 255);
        }
 
        .backTop {
            background-color: deepskyblue;
        }
 
        .slider {
            position: absolute;
            top: 510px;
            right: 200px;
            float: right;
            width: 70px;
            height: 160px;
            line-height: 160px;
 
        }
 
        .backTop {
            display: none;
            position: absolute;
            bottom: 0;
        }
 
        .main-w {
            height: 2000px;
        }
    </style>
</head>
 
<body>
    <div class="slider">
        <span class="backTop">返回顶部</span>
    </div>
    <div class="header-w">头部区域</div>
    <div class="banner-w">banner区域</div>
    <div class="main-w">主体区域</div>
    <script>
        var slider = document.querySelector('.slider');
        var span = document.querySelector('.backTop');
        var banner = document.querySelector('.banner-w');
        var main = document.querySelector('.main-w');
        var mainTops = main.offsetTop;
        var bannerTops = banner.offsetTop;
        // 侧边栏固定定位变化后的位置值
        var sliderTops = slider.offsetTop - bannerTops;
        // 被卷去头部的大小为bannerTops
        console.log(bannerTops);
        // 若页面被卷去的头部大于bannerTops的话就让侧边栏改为固定定位
        document.addEventListener('scroll', function () {
            var tops = window.pageYOffset;
            if (tops >= bannerTops) {
                slider.style.position = 'fixed';
                slider.style.top = sliderTops + 'px';
            } else {
                slider.style.position = 'absolute';
                slider.style.top = "520px";
            }
            if (tops >= mainTops) {
                span.style.display = "block";
            } else {
                span.style.display = "none";
            }
        })
    </script>
</body>
 
</html>

效果展示