仿B站顶部鼠标移动效果

最新推荐文章于 2025-08-12 14:37:12 发布

nekops

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量492

点赞数 2

CC 4.0 BY-SA版权

分类专栏：日志文章标签： javascript

本文链接：https://blog.csdn.net/qq_45441981/article/details/118914536

日志专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一段HTML代码，通过JavaScript实现在网页上，视频背景随鼠标在屏幕左右移动而自动平移。使用`mousemove`事件监听鼠标的移动，并根据X轴位置调整视频的transform属性，实现了流畅的响应效果。

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嘉门</title>
    <style>
        html,
        body {
            margin: 0px;
            width: 100%;
            position: relative;
            overflow-x: hidden;
        }
        
        .background {
            width: 100%;
            height: 185px;
            z-index: 2;
        }
        
        .video {
            z-index: 1;
            height: auto;
            position: absolute;
        }
        
        video {
            margin-left: -90px;
        }
    </style>
    <script>
        window.onload = function() {
            var ovideo = document.getElementsByTagName("video")[0]; //获取视频赋值给变量
            var oback = document.getElementsByClassName("background")[0]; //获取背景赋值给变量
            oback.onmousemove = function(E) { //鼠标移动获取X轴的方法
                    var xmove = E.screenX;
                    getmouseX(xmove);
                }
                //根据X轴移动背景视频
            function getmouseX(Xmove) { //Xmove为传的xmove的值
                //设置一个变量
                var i = 0;
                //中间值
                var md = document.body.clientWidth / 2; //获取网页宽度除以2
                // console.log(md);
                //根据中间值判断距离
                if (Xmove > md) { //大于中间值，则鼠标在右半区移动
                    var cha = Xmove - md; //cha越大代表需要移动的距离越大
                    var bili = cha / md; //转化比例
                    i = 90 * bili; //移动的距离
                    console.log(Xmove);
                    ovideo.style.transform = "translateX(" + -i + "px)";
                    // console.log(ddd);
                } else if (Xmove < md) { //小于中间值，则鼠标在左半区移动
                    var cha = md - Xmove; //cha越大代表需要移动的距离越大
                    var bili = cha / md; //转化比例
                    i = 90 * bili; //移动的距离
                    console.log(Xmove);
                    ovideo.style.transform = "translateX(" + i + "px)";
                    // console.log(ddd);
                } else {
                    return;
                }
            }
        }
    </script>
</head>

<body>
    <!-- 大框架 -->
    <div class="background">
        <!-- 视频框架 -->
        <div class="video">
            <video src="../img/e71914a7-e5df-43f0-aab0-cbf3ef3b35f5.mp4" autoplay="autoplay" loop muted="muted"></video>
        </div>

    </div>
</body>

</html>

中途发现b站扒下来的视频加上“autoplay”没法自动播放，之后发现可以通过加上muted="muted"静音播放属性，便可以实现自动播放。