Home > Article > Web Front-end > Sample code for implementing exquisite personalized navigation bar somersault cloud effect using JavaScript

Sample code for implementing exquisite personalized navigation bar somersault cloud effect using JavaScript

黄舟Original: 2017-10-30 09:23:522121browse

Achievement effect:

Implementation effect is shown in the figure below

##Implementation principle:

What is the somersault cloud effect:

•This effect is very simple, that is, when the mouse is moved to other navigation directories, the background image will slide with the mouse to the current directory.

Implementation ideas:

•When the mouse passes by, use offsetLeft to get the distance from the current box to the left, and assign this value to the end value of the easing animation.

•When you click, remember the current offsetLeft value. When the mouse passes by, give the previously clicked offsetLeft the value when it passes now.

Implementation code:

The following is the implementation code and detailed comments. The core is to set a span tag with position absolute, bind the mouse event, and use the encapsulated animate Animation realizes span's "somersault cloud" effect.

<!DOCTYPE html>
<html>
<head>
  <title>导航栏筋斗云效果</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background-color: rgba(0, 0, 0, 0.6);
    }
    .box{
      width: 415px;
      height: 42px;
      margin: 200px auto;
      background-color: #fff;
      position: relative;
    }
    ul{
      list-style: none;
      position: relative;
    }
    li{
      float: left;
      width: 83px;
      height: 42px;
      text-align: center;
      font: 500 15px/42px "微软雅黑";
      cursor: pointer;
    }
    span{
      position: absolute;
      left: 0;
      top: 0;
      width: 83px;
      height: 42px;
      background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
    }
  </style>
</head>
<body>
<p class="box">
  <span></span>
  <ul>
    <li>菜单栏1</li>
    <li>菜单栏2</li>
    <li>菜单栏3</li>
    <li>菜单栏4</li>
    <li>菜单栏5</li>
  </ul>
</p>
<script type="text/javascript">
  window.onload = function(){
    // 鼠标放在哪个li上面，span对应一道到哪里，移开后回到原位置
    var liArr = document.getElementsByTagName("li");
    var liWidth = liArr[0].offsetWidth;
    var span = document.getElementsByTagName("span")[0];
    // 计数器
    var cnt = 0;
    // for循环绑定事件
    for(var i=0; i<liArr.length; i++){
      // 自定义属性，然后绑定index属性为索引值
      liArr[i].index = i;
      // 鼠标进入事件
      liArr[i].onmouseover = function(){
        // 然span运动到该li的索引值位置
        animate(span, this.index*liWidth);
      }
      // 鼠标移开
      liArr[i].onmouseout = function(){
        // span运动到原位置
        animate(span, cnt*liWidth);
      }
      // 点击事件
      liArr[i].onclick = function(){
        // 计数器记录当前标签索引值
        cnt = this.index;
        animate(span, cnt*liWidth);
      }
    }
    // 缓动动画封装
    function animate(element, target){
      // 清除间歇调用
      clearInterval(element.timer);
      // 设置超时调用
      element.timer = setInterval(function(){
        // 设置步数
        var step = (target - element.offsetLeft)/10;
        // 调整步数
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 设置样式
        element.style.left = element.offsetLeft + step + "px";
        // console.log(1);
        if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
          element.style.left = target + "px";
          clearInterval(element.timer);
        }
      }, 20);
    }
  }
</script>
</body>
</html>

Summary

The above is the detailed content of Sample code for implementing exquisite personalized navigation bar somersault cloud effect using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of how JS implements countdown animation effect through Date objectNext article：Example of how JS implements countdown animation effect through Date object

See more

Sample code for implementing exquisite personalized navigation bar somersault cloud effect using JavaScript

Related articles