jQuery - 实例- 小小动画导航栏

所以我们学到了三个东西：

1.回顾一次CSS：

定位的时候　记住了！　绝对定位和相对定位　的参照是谁　特别是绝对定位的参照要注意，是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

还有就是  pointer-events: none; CSS　的这个属性　　他是直接可以忽略事件的发生的！！！　具体百度吧！！ 但是这个很有必要知道!!!

2.一些jq的动画啊 还有就是 stop  和 finsh 的应用,这些要会用即可,emmmm 还有一下事件,那些也一样要会知道会用即可.

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

<head>
    <meta charset="UTF-8">
    <title>BiHu导航</title>
    <script src="jqsourse.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 1000px;
            height: 50px;
            margin: 30px auto;
            border-bottom: 3px solid #1fd6be;
            position: relative;
        }

        ul > li {
            list-style: none;
            width: 100px;
            height: 50px;
            float: left;
            cursor: pointer;
            text-align: center;
            line-height: 50px;

        }

        ul > span {
            width: 100px;
            height: 50px;
            position: absolute;
            text-align: center;
            line-height: 50px;
            background-color: #1fd6be;
            border-bottom: solid red 3px;
            left: 0;
            color: #fff;
            cursor: pointer;
            /* 不作为事件目标
            *   会直接忽略他的事件
            */
            pointer-events: none;

        }


    </style>
</head>
<body>

<ul>
    <li>首页</li>
    <li>咨询</li>
    <li>体育</li>
    <li>政治</li>
    <li>本地</li>
    <li>游戏</li>
    <li>电子</li>
    <li>科技</li>
    <li>经济</li>
    <li>音乐</li>
    <span>首页</span>
</ul>

<script>
    //鼠标放上去时 我就动画跑起来
    $('li').stop().on('mouseover',function () {
        $('span').animate({
            left:$(this).index() * 100
        },100,'linear').text($(this).text());
    }
    );
    //鼠标点击时 我就打印自己的内容
    $('li').on('click',function (){
        alert($(this).text())
    });
    
    //如果离开li的话 那我span我就直接完成到最后那次移动
    $('li').mouseout(function (){
    $('span').finish();
    });
</script>


</body>
</html>

 

posted @ 2021-05-28 11:56  咸瑜  阅读(71)  评论(0)  编辑  收藏  举报