JavaScript案例：筋斗云

岳泽以

发布于 2022-10-26 17:27:58

5010

发布于 2022-10-26 17:27:58

文章被收录于专栏：岳泽以博客岳泽以博客

案例分析

利用动画函数做动画效果
原先筋斗云的起始位置是0
鼠标经过某个小li，把当前小li的offsetLeft位置做为目标值即可
鼠标离开某个小li，就把目标值设为0
如果点击了某个小li，就把li当前的位置存储起来，做为筋斗云的起始位置

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    ul {
        list-style: none;
    }

    body {
        background-color: black;
    }

    .c-nav {
        width: 900px;
        height: 42px;
        background: #fff url(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(cloud.gif) no-repeat;
    }
</style>
<script src="animate.js"></script>
<script>
    window.addEventListener('load', function () {
        //1.获取元素
        var cloud = document.querySelector('.cloud');
        var c_nav = document.querySelector('.c-nav');
        var lis = c_nav.querySelectorAll('li');
        //2.给所有的小li绑定事件
        var current = 0;
        //这个current做为筋斗云的起始位置
        for (var i = 0; i < lis.length; i++) {
            //鼠标经过把当前小li的位置作为目标值
            lis[i].addEventListener('mouseenter', function () {
                animate(cloud, this.offsetLeft);
            })
            //鼠标离开复原
            lis[i].addEventListener('mouseleave', function () {
                animate(cloud, current);
            })
            //当我们鼠标点击，就把当前的位置作为目标值
            lis[i].addEventListener('click', function () {
                current = this.offsetLeft;
            })
        }
    })
</script>

<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li class="current"> <a href="#">首页新闻</a> </li>
            <li> <a href="#">师资力量</a> </li>
            <li> <a href="#">活动策划</a> </li>
            <li> <a href="#">企业文化</a> </li>
            <li> <a href="#">招聘信息</a> </li>
            <li> <a href="#">公司简介</a> </li>
            <li> <a href="#">导航蓝目</a> </li>
            <li> <a href="#">百度测试</a> </li>
        </ul>
    </div>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除

存储