html+css实现全局固定位置悬浮的菜单

最新推荐文章于 2024-02-26 22:29:35 发布

Excel_VBA创维大表格จุ๊บ

最新推荐文章于 2024-02-26 22:29:35 发布

阅读量419

点赞数

分类专栏： HTML+css+js+vue 网页网站设计文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_44681501/article/details/133375613

版权

HTML+css+js+vue 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

网页网站设计

3 篇文章 0 订阅

订阅专栏

效果界面：

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
  <style>



    /*停用悬浮样式*/
      /*个性化*/
      .悬浮button{
          top:56%;          /*悬浮top*/
          right:0;
          width:100px;
          height: 40px;
          text-align: center;   /*文字居中*/
          line-height:40px;     /*文字下沉高度*/
          background: powderblue;  /*背景颜色*/
          border:1px solid #F90;    /*边框*/
          position:fixed;   /*悬浮位置*/
          background-image: url("img/悬浮按钮背景.png");
          color: yellow;    /*字体颜色*/
          border-radius: 5%;    /*边角圆度*/
      }


    /*默认隐藏二维码*/
    #微信二维码{
        width:250px;
        height:300px;
        line-height:30px;
        border:1px solid #F90;
        position:fixed;
        top:40%;
        right:130px;
        border-radius: 5%;    /*边角圆度*/
        display: none;
    }
    #QQ群二维码{
        width:250px;
        height:300px;
        line-height:30px;
        border:1px solid #F90;
        position:fixed;
        top:40%;
        right:130px;
        border-radius: 5%;    /*边角圆度*/
        display: none;
    }

    #咨询窗口{
        width:350px;
        height:400px;
        line-height:30px;
        border:1px solid #F90;
        position:fixed;
        top:40%;
        right:130px;
        border-radius: 5%;    /*边角圆度*/
        display: none;
        background-color: #b1dce2;
    }


    /*一个元素控制另一个二维码*/
    #button1{top: 40%;}
    #button2{top: 45%;}
    #button3{top: 50%;}

      #button1:hover~#微信二维码{
          display: block;
      }

      #button2:hover~#QQ群二维码{
          display: block;
      }



  </style>


<body>
<div id="button1" class="悬浮button">微信咨询</div>
<div id="button2" class="悬浮button">QQ群聊</div>
<div id="button3" class="悬浮button">客服咨询</div>

<img id="微信二维码" src="img/二维码.png" alt="">
<img id="QQ群二维码" src="img/QQ群.png" alt="">

<div id="咨询窗口" style="display: none">
    <p>智能机器人巴巴塔</p>
    <p>智能机器人巴巴塔</p>
</div>

<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>
<p>支付宝到账1,000,000,000.00元</p>


</body>

<script>
var 咨询按钮=document.getElementById('button3')
咨询按钮.onclick=function (){
    var 咨询窗口=document.getElementById('咨询窗口')
    if (咨询窗口.style.display== "block"){
        咨询窗口.style.display= "none"
    }else{
        咨询窗口.style.display= "block"
    }
}

</script>
</html>