js背景跟随

最新推荐文章于 2022-07-17 17:32:44 发布

一叶知秋9307

最新推荐文章于 2022-07-17 17:32:44 发布

阅读量372

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_40285497/article/details/80570840

本文介绍了一个使用HTML, CSS和JavaScript实现的网页效果案例。通过鼠标移动改变页面中两个背景图的位置，实现动态交互效果。利用JavaScript监听鼠标移动事件并计算相对位置，调整背景图片的位置属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #04090C;
        }
        div{
            height: 45vh;
            margin-bottom: 5vh;
            background-position: 40%;
            background-repeat: no-repeat;
        }
        .bg_1{
            background-image: url("bg.png");
        }
        .bg_2{
            background-image: url("bg2.png");
            background-position-x: 70%;
        }
    </style>
</head>
<body>
<div class="bg_1"></div>
<div class="bg_2"></div>

<script>
    let ele1 = document.querySelector(".bg_1");
    let ele2 = document.querySelector(".bg_2");
    let winWidth = window.innerWidth
    window.addEventListener("mousemove",function (ev) {
        let percent =  ev.clientX/winWidth;
        let fruit1 = 40*(1-percent);
        let fruit2 = 70*(1-percent);
        ele1.style.backgroundPositionX =  fruit1 +"%";
        ele2.style.backgroundPositionX =  fruit2 +"%";
    })
</script>
</body>
</html>