WebAPI编程（4）—— PC端网页特效_webapi仿京东放大镜-CSDN博客

本文链接：https://blog.csdn.net/zeroheitao/article/details/108919128

PC端网页特效

1、元素偏移量offset系列

1.1 offsett 概述
使用offset系列相关属性可以动态的得到该元素的位置、大小等。

element.offsetParent——返回作为该元素有定位的父级元素，否则返回body
element.offsetTop——返回元素相对带有定位父元素上方的偏移
element.offsentLeft——返回元素相对带有定位父元素左边框的偏移
element.offsetWidth——返回自身包括paddind、边框、内容区的宽度、返回数值不带单位
element.offsetHeight——返回自身包括paddind、边框、内容区的高度、返回数值不带单位

1.2 offset 与 style 的区别
在这里插入图片描述
1.3 仿京东放大镜效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="放大镜效果.css">
    <script src='放大镜效果.js'></script>
</head>

<body>
    <div class="wrap">
        <div class="img">
            <img src="jackson.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="jackson1.jpg" alt="" class='bigImg'>
        </div>
    </div>
</body>

</html>

.wrap {
    width: 460px;
    height: 800px;
}

.img {
    position: relative;
    height: 450px;
    border: 1px solid #ccc;
}

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: #FEDE4F;
    opacity: .5;
    border: 1px solid #ccc;
    cursor: move;
}

.big {
    display: none;
    position: absolute;
    left: 470px;
    top: 0;
    width: 600px;
    height: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.big img {
    position: absolute;
    top: 0;
    left: 0;
}

window.addEventListener('load', function() {
    var img = document.querySelector('.img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    img.addEventListener('mousemove', function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskMax = 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';
    })
})

效果图：
在这里插入图片描述

2、元素可视化client系列

client 概述：使用client系列相关属性可以动态的得到该元素的位置、大小等。

element.clientTop——返回元素上边框的大小
element.clientLeft——返回元素左边框的大小
element.clientWidth——返回自身包括paddind、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight——返回自身包括paddind、内容区的高度不含边框，返回数值不带单位

3、元素滚动scroll系列

3.1 scroll 概述：动态得到该元素的大小、滚动距离等。

element.scrollTop——返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft——返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth——返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight——返回自身实际的高度，不含边框，返回数值不带单位

3.2 仿淘宝固定侧边栏案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="仿淘宝固定侧边栏.css">
    <script src="仿淘宝固定侧边栏.js"></script>
</head>

<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>
</body>

</html>

.slider-bar {
    position: absolute;
    left: 50%;
    top: 300px;
    margin-left: 600px;
    width: 45px;
    height: 130px;
    background-color: purple;
}

.w {
    width: 1200px;
    margin: 10px auto;
}

.header {
    height: 150px;
    background-color: pink;
}

.banner {
    height: 250px;
    background-color: skyblue;
}

.main {
    height: 1000px;
    background-color: yellowgreen;
}

span {
    display: none;
    position: absolute;
    bottom: 0;
}

window.addEventListener('load', function() {
    var sliderbar = document.querySelector('.slider-bar');
    var banner = document.querySelector('.banner');
    var bannerTop = banner.offsetTop;
    var sliderbarTop = sliderbar.offsetTop - bannerTop;
    var main = document.querySelector('.main');
    var goBack = document.querySelector('.goBack');
    var mainTop = main.offsetTop;
    document.addEventListener('scroll', function() {
        // console.log(window.pageYOffset);
        if (window.pageYOffset >= bannerTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = sliderbarTop + 'px';
        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = 300 + 'px';
        }
        if (window.pageYOffset >= mainTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    })
})