当前位置：网站首页>(12) Somersault cloud case (navigation bar highlights follow)

(12) Somersault cloud case (navigation bar highlights follow)

2022-07-01 04:15:00 【superfortunate】

  1. The mouse passes through a small li, Tumbling clouds follow to the current small li Location
  2. The mouse leaves this little li, Somersault cloud returns to its original position
  3. Mouse click on a small li, The somersault cloud will stay on this small li The location of
  4. Still use animation functions for animation effects
  5. The original location of the tumbling cloud was 0
  6. The mouse passes through a small li, Make the current small li Of offsetLeft Position as the target value

 

<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li><a href="javascrit:;"> Home news </a></li>
            <li><a href="javascrit:;"> faculty </a></li>
            <li><a href="javascrit:;"> event planning </a></li>
            <li><a href="javascrit:;"> The enterprise culture </a></li>
            <li><a href="javascrit:;"> Recruitment information </a></li>
            <li><a href="javascrit:;"> Company profile </a></li>
            <li><a href="javascrit:;"> Yamaguchi travels </a></li>
            <li><a href="javascrit:;"> Mecha is really </a></li>
        </ul>
    </div>
</body>
<style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background-color: black;
        }
        
        .c-nav {
            width: 900px;
            height: 42px;
            background: #fff url(images/rss.png) no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;
            position: relative;
        }
        
        .c-nav ul {
            position: absolute;
        }
        
        .c-nav li {
            float: left;
            width: 83px;
            text-align: center;
            line-height: 42px;
        }
        
        .c-nav li a {
            color: #333;
            text-decoration: none;
            display: inline-block;
            height: 42px;
        }
        
        .c-nav li a:hover {
            color: white;
        }
        
        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) no-repeat;
        }
    </style>
<script>
        window.addEventListener('load',function(){
            
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            var lis = c_nav.querySelectorAll('li');
            var current = 0;// This is where the tumbling cloud starts 

            for(var i = 0; i < lis.length; i++) {
                lis[i].addEventListener('mouseenter',function(){
                    animate(cloud,this.offsetLeft);
                })
                lis[i].addEventListener('mouseleave',function(){
                    animate(cloud,current);// Go back to the starting position 
                })

                // When the mouse clicks , Take the current position as the target value 
                lis[i],addEventListener('click',function(){
                    current = this.offsetLeft;
                });
            }
            
        })
    </script>

 animate（） For the animation function used before .

Happy study ！

原网站

版权声明
本文为[superfortunate]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160314559559.html

边栏推荐

猜你喜欢

随机推荐