导航栏滑动底色小案例

103 篇文章 0 订阅
97 篇文章 0 订阅
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    body {
      background-color: #333;
    }

    .nav {
      width: 800px;
      height: 42px;
      margin: 100px auto;
      background: url(images/rss.png) right center no-repeat;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
    }

    .nav li {
      width: 83px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      float: left;
      cursor: pointer;
    }

    .nav span {
      position: absolute;
      top: 0;
      left: 0;
      width: 83px;
      height: 42px;
      background: url(images/cloud.gif) no-repeat;
    }

    ul {
      position: relative;
    }
  </style>
</head>
<body>
<div class="nav">
  <span id="cloud"></span>
  <ul id="navBar">
    <li>这是案例</li>
    <li>这是案例</li>
    <li>这是案例</li>
    <li>这是案例</li>
    <li>这是案例</li>
    <li>这是案例</li>
    <li>这是案例</li>
    <li>这是案例</li>
  </ul>
</div>
<script>
  //根据id获取对应的元素
    function my$(id) {
      return document.getElementById(id);
  }

  //匀速动画
  function animate(element, target) {
    //清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
      //获取元素的当前位置
      var current = element.offsetLeft;
      //移动的步数
      var step = (target - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      current += step;
      element.style.left = current + "px";
      if (current == target) {
        //清理定时器
        clearInterval(element.timeId);
      }
    }, 20);
  }

  //获取云彩
  var cloud = my$("cloud");

  //获取所有的li标签
  var list = my$("navBar").children;

  //循环遍历分别注册鼠标进入,鼠标离开,点击事件
  for (var i = 0; i < list.length; i++) {
    // 鼠标进入事件
    list[i].onmouseover = mouseoverHandle;
    // 点击事件
    list[i].onclick = clickHandle;
    // 鼠标离开事件
    list[i].onmouseout = mouseoutHandle;
  }

  function mouseoverHandle() {//进入
    //移动到鼠标此次进入的li的位置
    animate(cloud, this.offsetLeft);
  }

  // 定义空数组 点击的时候,记录此次点击的位置
  var lastPosition = 0;
  function clickHandle() {//点击
    lastPosition = this.offsetLeft;
  }

  function mouseoutHandle() {//离开
    animate(cloud, lastPosition);
  }
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值