H5背景音乐

最新推荐文章于 2023-11-03 21:35:53 发布

施主请别摸老衲的脸

最新推荐文章于 2023-11-03 21:35:53 发布

阅读量760

点赞数

分类专栏： js HTML css jq

本文链接：https://blog.csdn.net/qq_36591333/article/details/83110614

版权

js 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css" media="screen">
        .btnvv {
            background: url(bgmBtn.svg);
            background-size: 100% 100%;
            position: absolute;
            width: 30px;
            height: 30px;
            top: 3%;
            right: 1%;
            z-index: 999;
            cursor:pointer ;
        }
        .btnonclick{
            animation:circle 1s infinite linear;
        }
        @-webkit-keyframes circle{
        0%{ transform:rotate(0deg); }
        50%{ transform:rotate(-180deg); }
        100%{ transform:rotate(-360deg); }
        }
    </style>
    <body>
        <div class="btnvv"></div>
        <audio id="videeo" autoplay="" loop="loop" src="VA0DAFWBrJWAMyVfAGXYX-4r0-M895.mp3"></audio>

    </body>
</html>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
        //音乐
    $(function(){
        var videeo=document.getElementById("videeo");
        $(".btnvv").addClass("btnonclick");
        $(".btnvv").click(function(){
            if (videeo.paused) {
                videeo.play();
                $(".btnvv").addClass("btnonclick");
            }
            else{
                videeo.pause();
                $(".btnvv").removeClass("btnonclick");
            }
        })
    })
</script>