B站头部鼠标移动产生的视差效果

最新推荐文章于 2024-08-12 22:28:07 发布

m0_53579196

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量137

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_53579196/article/details/129986161

版权

判断鼠标左右移动的距离更改backgroundPositionX

<!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>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .head {
        width: 100%;
        height: 155px;
        /* background: url('./image/bilibili_head.png'); */
        background: url('http://i0.hdslb.com/bfs/archive/5d624c842e091447cf9b679d4cc6ae70d731ea06.png@3840w_360h_1c_90q');
        background-position-x: 0px;
    }
</style>

<body>
    <div class="head"></div>
</body>
<script>
    var header = document.querySelector('.head')
    //鼠标移入
    header.addEventListener('mouseover', function (event) {
        var event = event || window.event
        mouseNumOne = event.clientX
    })
    //鼠标移动
    header.addEventListener('mousemove', function (event) {
        var event = event || window.event
        mouseNumTwo = event.clientX;
        //鼠标移入后 鼠标左右移动的距离
        mouseNumThree = (mouseNumOne - mouseNumTwo) / 10
        header.style.backgroundPositionX = -mouseNumThree + 'px'
    })


    //鼠标移出--让背景图位置复原  即--backgroundPositionX--恢复为0
    header.addEventListener('mouseout', function (event) {
        var event = event || window.event
        //正数的话--
        if (mouseNumThree > 0) {
            var bgiMoveOne = setInterval(function () {
                mouseNumThree -= 3
                header.style.backgroundPositionX = -mouseNumThree + 'px'
                if(mouseNumThree<=0){
                    clearInterval(bgiMoveOne)
                }
            }, 5)
        }
        // 负数的话++
        if (mouseNumThree < 0) {
            var bgiMoveTwo = setInterval(function () {
                mouseNumThree += 3
                header.style.backgroundPositionX = -mouseNumThree + 'px'
                if(mouseNumThree>=0){
                    clearInterval(bgiMoveTwo)
                }
            }, 5)
        }
        header.style.backgroundPositionX = 0 + 'px'
    })
</script>

</html>