js吸顶与浮动广告的实现

自由与自然

已于 2024-01-03 12:53:27 修改

阅读量759

点赞数 9

文章标签： javascript 开发语言 html5 css css3

于 2023-12-22 13:39:34 首次发布

本文链接：https://blog.csdn.net/qq_59837818/article/details/135150909

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="test12.js"></script>
</head>
<style>
    .ding {
        width: 200px;
        height: 200px;
        background-color: #33c900;
        position: absolute;
        top: 250px;
    }

    #img1 {
        width: 100%;
        height: 100%;
    }

    #img2 {
        width: 120px;
        height: 120px;
        position: absolute;
        left: 1px;
        top: 1px;
    }

    #img2 img {
        width: 100%;
        height: 100%;
    }

    #img2 span {
        position: absolute;
        top: 0;
        right: 0;
        color: black;
    }

    .guangao {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }
</style>

<body>
    <div class="ding"><img id="img1" src="test01/img01/支付宝.png" alt=""></div>
    <div class="guangao">
        <div id="img2"><span>x</span><img src="test01/img01/微博.png" alt=""></div>
    </div>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>
    <p>qwfeqfewqwfewqfeqfweqfwefwqwfqwf</p>


</body>
<sricpt>
window.onload = function () {
    var div = document.querySelector(".ding");
    let img2 = document.querySelector('#img2');
    let guangao = document.querySelector('.guangao');
    let span = document.querySelector('#img2 span');
    window.onscroll = function () {
        guangao.style.top = window.scrollY + 'px';
        guangao.style.left = window.scrollX + 'px';
        var top = this.window.scrollY;
        if (top > 250) {
            div.style.top = top + 'px';
        } else {
            div.style.top = 250 + 'px';
        }
    }
    let x = 1, y = 1;
    let xDirection = 5, yDirection = 5; // 使用1和-1表示方向
    span.addEventListener("click", function closeImage() {
        img2.style.display = 'none';
    });
    function move() {
        // 获取页面宽高
        let w = guangao.clientWidth;
        let h = guangao.clientHeight;
        let imgWidth = img2.offsetWidth;
        let imgHeight = img2.offsetHeight;


        // 判断图片碰壁的四种情况
        if (x <= 0 || x >= w - imgWidth) {
            xDirection *= -1; // 改变方向
        }

        if (y <= 0 || y >= h - imgHeight) {
            yDirection *= -1; // 改变方向
        }

        // 更新位置
        x += xDirection;
        y += yDirection;
        img2.style.left = x + 'px';
        img2.style.top = y + 'px';
    }
    var timer = setInterval(move, 20);
    img2.addEventListener("mouseover", function () {
        clearInterval(timer);
    });
    img2.addEventListener("mouseout", function () {
        timer = setInterval(move, 20);
    });
}
</sricpt>
</html>

吸顶我这里没有用fixed，用的使absolute,主要思想使当鼠标滚动距离大于top时，top = window.scrollY ,小于时，恢复原来的top值。
浮动广告是,它对大容器进行绝对定位，设置定时器，改变它的left ,top值，注意的是大容器的宽高为100vw 100vh，鼠标滚动时，大容器的left=window.scrollX top =window.scrollY，这样我们缩放界面或者是滚动界面都能在当前视口看见广告移动。

自由与自然

关注

9
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js吸顶与浮动广告的实现

浮动广告是,它对大容器进行相对定位，设置定时器，改变它的left ,top值，注意的是大容器的宽高为100vw 100vh，鼠标滚动时，大容器的left=window.scrollX top =window.scrollY，这样我们缩放界面或者是滚动界面都能在当前视口看见广告移动。吸顶我这里没有用fixed，用的使absolute,主要思想使当鼠标滚动距离大于top时，top = window.scrollY ,小于时，恢复原来的top值。
复制链接

扫一扫