jQuery滑动框文字导航栏代码-jquery案例-前端日记簿

首页 jquery案例正文

jQuery滑动框文字导航栏代码

2023-11-16 76

效果图：

在案例中鼠标在导航上进行移动的时候会出现一个边框跟随鼠标进行滑动鼠标移出则消失点击导航时阴影部分的方块会滑动到点击的导航栏上面

html：

准备好一个盒子导航栏用ul li表示边框盒子跟阴影部分我们通过span标签使用定位的方式进行设置

 <div class="box">
      <ul>
        <li class="li">网站首页</li>
        <li class="li">关于我们</li>
        <li class="li">成功案例</li>
        <li class="li">产品中心</li>
        <li class="li">联系我们</li>
      </ul>
      <sapn class="border1"></sapn>
      <span class="border2"></span>
    </div>

首先我们采用弹性布局的方式对导航栏的li标签进行横向排列并且给子元素使用flex:1 平分

span标签需要通过定位的方式来进行布局所以我们前面给父元素添加了一个相对定位然后通过transform中的skew进行倾斜给边框的demo进行隐藏

在js中给所有的li标签添加上 hover事件当鼠标移动到对应的标签上面时获取当前 li的宽度以及下标通过索引*下标的方式进行left移动并且让边框显示移出直接隐藏

这里的动画可以用animate进行设置当是会有点不连贯所以可以给边框盒子添加transition 进行设置

很简单了当点击时也是获得相同的宽度以及下标然后进行移动

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery滑动框文字导航栏代码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      body {
        background: #323232;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box {
        position: relative;
        width: 800px;
        height: 50px;
      }
      .box ul {
        display: flex;
      }
      .box ul li {
        user-select: none;
        cursor: pointer;
        flex: 1;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
      }
      .box .border1,
      .box .border2 {
        position: absolute;
        width: 20%;
        height: 100%;
        top: 0;
        transform: skew(-35deg);
      }
      .border1 {
        transition: all 0.6s;
        z-index: -1;
        border: 1px solid #ccc;
        opacity: 0;
      }
      .border2 {
        background: rgba(255, 255, 255, 0.2);
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li class="li">网站首页</li>
        <li class="li">关于我们</li>
        <li class="li">成功案例</li>
        <li class="li">产品中心</li>
        <li class="li">联系我们</li>
      </ul>
      <sapn class="border1"></sapn>
      <span class="border2"></span>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(".li").hover(
    function () {
      let liWidth = $(this).width();
      let index = $(this).index();
      console.log(liWidth, index);
      $(".border1").css({ left: index * liWidth + "px", opacity: 1 });
    },
    function () {
      $(".border1").css({ opacity: 0 });
    }
  );

  $(".li").click(function () {
    let liWidth = $(this).width();
    let index = $(this).index();
    $(".border2").animate({ left: index * liWidth + "px" }, 500);
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=209

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。