JQ带滚动效果的导航条

最新推荐文章于 2022-04-10 17:04:34 发布

zhooson

最新推荐文章于 2022-04-10 17:04:34 发布

阅读量718

点赞数

分类专栏： css jquery 文章标签： jquery css

本文链接：https://blog.csdn.net/Zhooson/article/details/78006431

版权

css 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

先看效果：
这是纯JQ和css完成的
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .switch_button{
            width:120px;
            height:30px;
            padding:3px;
            background:#f9f9f9;
            border-radius: 3px;
            position: relative;
            margin:20px 40px 0 0;
        }
        .switch_button input,.query_switch input{
            display:block;
            text-align: center;
            line-height: 30px;
            border:0;
            background:none;
            width:60px;
            height:30px;
            float:left;
            position: absolute;
            z-index: 9;
            cursor: pointer;
            font-size:14px;
            color:#999;
        }
        .switch_button input:hover,.query_switch input:hover{
            color:#4DA1FF;
        }
        .switch_button input:focus { outline: none;} 
        .switch_button .select_B,.query_switch .select_B{
            display:block;
            position:absolute;
            width:60px;
            height:30px;
            background:#4DA1FF;
            top:0;
            left:0;
            top:3px;
            left:3px;
            border-radius: 3px;
        }
        .switch_button .thisWeek{
            top:3px;
            left:3px;
        }
        .switch_button .thisMonth{
            top:3px;
            left:63px;
        }
        .switch_button .thisDay{
            top:3px;
            left:123px;
        }
        .switch_button input.select_color,.query_switch input.select_color{color:#fff;}
        .switch_button .select_color:hover,.query_switch .select_color:hover{color:#fff;}

    </style>
</head>
<body>
    <div class="switch_button">
        <input type="button" class="thisWeek select_color" value="按本周" />
        <input type="button" class="thisMonth" value="按本月" />
        <input type="button" class="thisDay" value="按本日" />
        <i class="select_B"></i>
    </div>

    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(".switch_button input").on("click",function(){
            $(this).siblings(".select_B").animate({left:$(this).css("left")},"slow");
            $(this).addClass("select_color").siblings().removeClass("select_color");
        })
    </script>
</body>
</html>

分析：就是来回滚动的i标签left是点击哪一个元素获取哪一个元素的left赋值给它就可以的，这里三个是通过定位的方式来实现，这里的input换成div也是可以