devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Html+Css+JS实现悬浮球移动+吸附+菜单效果_html 悬浮球

作者：IT小白 | 2024-03-24 20:05:36

赞

踩

html 悬浮球

Css

  1.     :root {
  2.       --item-translateX: -100px;
  3.     }
  4.  
  5.     /* * {
  6.       margin: 0;
  7.       padding: 0;
  8.     } */
  9.  
  10.     /* body,
  11.     html {
  12.       width: 100%;
  13.       height: 100%;
  14.     } */
  15.  
  16.     /* body {
  17.       background: linear-gradient(rgb(35, 189, 236), rgb(45, 99, 248));
  18.     } */
  19.  
  20.     .boxButton+.circular,
  21.     .boxButton+.circular+.fork,
  22.     .boxButton,
  23.     .box-item {
  24.       position: absolute;
  25.       top: 200px;
  26.       right: -20px;
  27.     }
  28.  
  29.     .boxButton {
  30.       display: block;
  31.       width: 40px;
  32.       height: 40px;
  33.       z-index: 2;
  34.       opacity: 0;
  35.       cursor: pointer;
  36.     }
  37.  
  38.     .boxButton+.circular {
  39.       width: 30px;
  40.       height: 30px;
  41.       display: block;
  42.       z-index: 1;
  43.       border-radius: 50%;
  44.       /* 控制中心圆圈 */
  45.       border: 5px solid rgba(255, 255, 255, 0.7);
  46.       /* 圆圈中心颜色 */
  47.       /* background: rgba(255, 255, 255, 0.2); */
  48.       background-color: blueviolet;
  49.       /* 外围光圈阴影 */
  50.       box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.2);
  51.       margin: 10px;
  52.       /* 过渡 */
  53.       transition: all 0.5s;
  54.       transform-origin: 50% 50%;
  55.     }
  56.  
  57.     .boxButton:checked+.circular+.fork {
  58.       width: 40px;
  59.       height: 40px;
  60.       display: block;
  61.       z-index: 1;
  62.       border-radius: 50%;
  63.       /* 控制另一个交互颜色*/
  64.       /* background: rgba(255, 255, 255, 0.2); */
  65.       background-color: blue;
  66.       /* 另外一个周围阴影颜色效果 */
  67.       box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.2);
  68.       margin: 10px;
  69.       /* 过渡 */
  70.       transition: all 0.5s;
  71.     }
  72.  
  73.     /* 中心的X */
  74.     .boxButton:checked+.circular+.fork::after,
  75.     .boxButton:checked+.circular+.fork::before {
  76.       content: "";
  77.       width: 30px;
  78.       height: 3px;
  79.       display: block;
  80.       z-index: 1;
  81.       border-radius: 2.5px;
  82.       background: rgba(255, 255, 255, 0.7);
  83.       transition: all 0.5s;
  84.       content: "";
  85.       position: absolute;
  86.       top: 50%;
  87.       left: 50%;
  88.       transform: translate(-50%, -50%);
  89.     }
  90.  
  91.     /* 旋转效果 点击后里面按钮 */
  92.     .boxButton:checked+.circular+.fork {
  93.       transform: rotate(360deg);
  94.     }
  95.  
  96.     /* 中间×的位置变化 */
  97.     .boxButton:checked+.circular+.fork::after {
  98.       transform: translate(-50%, -50%) rotate(45deg);
  99.     }
  100.  
  101.     /* 中间×的位置变化 */
  102.     .boxButton:checked+.circular+.fork::before {
  103.       transform: translate(-50%, -50%) rotate(-45deg);
  104.     }
  105.  
  106.  
  107.     .boxButton:checked+.circular {
  108.       width: 0;
  109.       height: 0;
  110.       border: 0px;
  111.       box-shadow: none;
  112.     }
  113.  
  114.     .boxButton:checked~ul .box-item {
  115.       opacity: 1;
  116.     }
  117.  
  118.     .box-item:nth-child(1) {
  119.       transform: rotate(90deg);
  120.     }
  121.  
  122.  
  123.     .box-item:nth-child(2) {
  124.       transform: rotate(45deg);
  125.     }
  126.  
  127.     .box-item:nth-child(3) {
  128.       transform: rotate(0deg);
  129.     }
  130.  
  131.     .box-item:nth-child(4) {
  132.       transform: rotate(315deg);
  133.     }
  134.  
  135.     .box-item:nth-child(5) {
  136.       transform: rotate(270deg);
  137.     }
  138.  
  139.  
  140.     .box-item:nth-child(1) a {
  141.       transform: rotate(0deg);
  142.     }
  143.  
  144.     .box-item:nth-child(2) a {
  145.       transform: rotate(-45deg);
  146.     }
  147.  
  148.     .box-item:nth-child(3) a {
  149.       transform: rotate(0deg);
  150.     }
  151.  
  152.     .box-item:nth-child(4) a {
  153.       transform: rotate(45deg);
  154.     }
  155.  
  156.     .box-item:nth-child(5) a {
  157.       transform: rotate(90deg);
  158.     }
  159.  
  160.     /* 可控制按钮分布 */
  161.     .boxButton1:checked~ul .box-item:nth-child(1) {
  162.       /* 更改rotate值控制按钮散波方向 */
  163.       transform: rotate(45deg) translateX(var(--item-translateX));
  164.     }
  165.  
  166.     .boxButton1:checked~ul .box-item:nth-child(2) {
  167.       transform: rotate(0deg) translateX(var(--item-translateX));
  168.     }
  169.  
  170.     .boxButton1:checked~ul .box-item:nth-child(3) {
  171.       transform: rotate(-45deg) translateX(var(--item-translateX));
  172.     }
  173.  
  174.     /* .boxButton:checked~ul .box-item:nth-child(4) {
  175.       transform: rotate(315deg) translateX(var(--item-translateX));
  176.     }
  178.     .boxButton:checked~ul .box-item:nth-child(5) {
  179.       transform: rotate(270deg) translateX(var(--item-translateX));
  180.     } */
  181.  
  182.     .boxButton:checked~ul .box-item a {
  183.       pointer-events: auto;
  184.     }
  185.  
  186.     .boxButton+.circular::before {
  187.       top: 10px;
  188.     }
  189.  
  190.     .boxButton+.circular::after {
  191.       top: -10px;
  192.     }
  193.  
  194.     .box-item {
  195.       display: block;
  196.       width: 60px;
  197.       height: 60px;
  198.       opacity: 0;
  199.       transition: 0.5s;
  200.     }
  201.  
  202.     .box-item a {
  203.       display: block;
  204.       width: inherit;
  205.       height: inherit;
  206.       line-height: 60px;
  207.       /* 过渡显示颜色 */
  208.       /* color: rgba(255, 255, 255, 0.7); */
  209.       color: brown;
  210.       /* background: rgba(255, 255, 255, 0.2); */
  211.       /* 标签背景颜色 */
  212.       background-color: yellow;
  213.       border-radius: 50%;
  214.       text-align: center;
  215.       text-decoration: none;
  216.       font-size: 30px;
  217.       pointer-events: none;
  218.       transition: 0.2s;
  219.     }
  220.  
  221.     .touming {
  222.       opacity: 0.3;
  223.     }
  224.  
  225.     .xuanfu {
  226.       position: absolute;
  227.     }
  228.  
  229.     .boxButton2:checked~ul .box-item:nth-child(1) {
  230.       /* 更改rotate值控制按钮散波方向 */
  231.       transform: rotate(135deg) translateX(var(--item-translateX));
  232.     }
  233.  
  234.     .boxButton2:checked~ul .box-item:nth-child(2) {
  235.       transform: rotate(180deg) translateX(var(--item-translateX));
  236.     }
  237.  
  238.     .boxButton2:checked~ul .box-item:nth-child(3) {
  239.       transform: rotate(225deg) translateX(var(--item-translateX));
  240.     }
  241.  
  242.     /* .box-button1:checked~ul .box-item:nth-child(4) {
  243.       transform: rotate(315deg) translateX(var(--item-translateX));
  244.     }
  246.     .box-button1:checked~ul .box-item:nth-child(5) {
  247.       transform: rotate(270deg) translateX(var(--item-translateX));
  248.     } */

Html

  1. <div class="box xuanfu touming">
  2.     <input type="checkbox" class="boxButton " id="box-buttons" />
  3.     <label class="circular" for="box-buttons"></label>
  4.     <label class="fork" for="box-buttons"></label>
  5.     <ul>
  6.       <li class="box-item">
  7.         <a href="#"><i class="fa fa-square-o"></i></a>
  8.       </li>
  9.       <li class="box-item">
  10.         <a href="#"><i class="fa fa-bars"></i></a>
  11.       </li>
  12.       <li class="box-item">
  13.         <a href="#"><i class="fa fa-lock"></i></a>
  14.       </li>
  15.       <!-- <li class="box-item">
  16.         <a href="#"><i class="fa fa-crop"></i></a>
  17.       </li> -->
  18.       <!-- <li class="box-item">
  19.         <a href="#"><i class="fa fa-commenting-o"></i></a>
  20.       </li> -->
  21.     </ul>
  22.   </div>

JS部分

  1. // 获取元素的对象
  2.     const xuanfu = document.querySelector('.xuanfu')
  3.     const boxButton = document.querySelector('.boxButton')
  4.     // console.log(xuanfu)
  5.     // console.log(boxButton)
  6.  
  7.     //绑定事件触摸
  8.     xuanfu.addEventListener('touchstart', function (e) {
  9.       // 获取元素当前距离左侧的偏移量
  10.       this.l = this.offsetLeft
  11.       // 获取触摸开始时 触摸点距离左侧的偏移量
  12.       this.x = e.targetTouches[0].clientX
  13.  
  14.       // 获取元素当前距离顶侧的偏移量
  15.       this.t = this.offsetTop
  16.       // 获取触摸开始时 触摸点距离顶侧的偏移量
  17.       this.y = e.targetTouches[0].clientY
  18.  
  19.       // 使其不透明
  20.       this.classList.remove('touming')
  21.       // 清空定时器
  22.       clearTimeout(this.timer)
  23.     })
  24.     xuanfu.addEventListener('touchmove', function (e) {
  25.       // 获取触摸移动后,触摸点距离左侧的偏移
  26.       this._x = e.targetTouches[0].clientX
  27.       // 计算最终的left
  28.       let newLeft = this._x - (this.x - this.l);
  29.       // console.log(newLeft)
  30.       // 判断
  31.       if (newLeft <= 0) newLeft = 0
  32.       if (newLeft >= document.documentElement.clientWidth - this.offsetWidth) {
  33.         newLeft = document.documentElement.clientWidth - this.offsetWidth
  34.       }
  35.  
  36.  
  37.       // 获取触摸移动后,触摸点距离左侧的偏移
  38.       this._y = e.targetTouches[0].clientY
  39.       // 计算最终的left
  40.       let newTop = this._y - (this.y - this.t);
  41.       // console.log(newTop)
  42.       // 判断
  43.       if (newTop <= 0) newTop = 0
  44.       if (newTop >= document.documentElement.clientWidth - this.offsetHeight) {
  45.         newTop = document.documentElement.clientWidth - this.offsetHeight
  46.       }
  47.       // 设置样式
  48.       this.style.left = newLeft + 'px'
  49.       this.style.top = newTop + 'px'
  50.     })
  51.     xuanfu.addEventListener('touchend', function (e) {
  52.       // 增加过渡效果
  53.       this.style.transition = 'none'
  54.  
  55.       // 吸附效果
  56.       // 计算居中状态下left值
  57.       this.middle = (document.documentElement.clientWidth - this.offsetWidth) / 2
  58.       // console.log(middle)
  59.       //计算
  60.       this.left = this.offsetLeft
  61.       // console.log(left)
  62.  
  63.       // 声明变量 存放最终的left值
  64.       let newLeft
  65.       //判断
  66.       if (this.left <= this.middle) {
  67.         newLeft = 0
  68.       } else {
  69.         newLeft = document.documentElement.clientWidth - this.offsetWidth
  70.       }
  71.       // 设置
  72.       this.style.left = newLeft + 'px'
  73.       // 启动定时器,使其变成透明的
  74.       this.timer = setTimeout(() => {
  75.         this.classList.add('touming')
  76.       }, 2000)
  77.     })
  78.     boxButton.addEventListener('click', function (e) {
  79.       console.log(e)
  80.       // console.log(this.Left)
  81.       let res = (document.documentElement.clientWidth) / 2
  82.       console.log(res)
  83.       if (e.clientX <= res) {
  84.         this.classList.add('boxButton2')
  85.       } else {
  86.         this.classList.remove('boxButton2')
  87.         this.classList.add('boxButton1')
  88.       }
  89.     })

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/304557
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号