您的位置: 首页  >  文章  >  分别使用原生JS与jQuery实现选项卡切换动画

分别使用原生JS与jQuery实现选项卡切换动画

分类: 文章 • 2023-03-25 21:07:39

大概就是实现如图所示的效果：
分别使用原生JS与jQuery实现选项卡切换动画

jQuery实现：

首先是使用jQuery实现动画效果，依赖于jQuery选择器和animate动画，写起来非常简单：

<script type="text/javascript">
    $(function(){
        $('input').click(function(){
            var current = $(this).index();
            var left = current * -500;
            $(this).addClass('current').siblings().removeClass('current');
            $('.tab_cons').stop().animate({left:left + "px"});
        });
    });
</script>

原生JS实现：

在不使用animate动画的情况下，我们可以采用JS定时器思路：

<script type="text/javascript">
    $(function(){
        var time = null;
        $('input').click(function(){
           var current = $(this).index();
           var left = current * -500;
           $(this).addClass('current').siblings().removeClass('current');
           var currentLeft =  parseInt($('.tab_cons').css('left'));
           moveDiv(left, currentLeft);
        });

        function moveDiv(left, currentLeft){
            clearInterval(time);
            time = setInterval(move,1);
            function move(){
                var temp = left - currentLeft;
                //console.log(temp);
                if(temp>0){
                    currentLeft += 10;
                }else if(temp<0){
                    currentLeft -= 10;
                }else{
                    clearInterval(time);
                    return;
                }
                $('.tab_cons').css('left', currentLeft + 'px');
            }
        }
    });
</script>

这里偷了点懒，JQuery选择器实在太好用了，排他选择简直神器啊
有兴趣的同学可以自己将用到JQuery的地方改成原生JS

附件：

附上html文件和css样式

html:

<body>
<div class="tab_wrap">
    <div class="tab_btns">
        <input type="button" value="公司新闻" class="current">
        <input type="button" value="国际新闻">
        <input type="button" value="行业动态">
    </div>
    <div class="tab_cons">
        <div class="limit">
            <ul>
                <li><a href="#">公司新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
                <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
                <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
                <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
                <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
                <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
            </ul>
            <ul>
                <li><a href="#">国际新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
                <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
                <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
                <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
                <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
                <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
            </ul>
            <ul>
                <li><a href="#">行业动态G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
                <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
                <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
                <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
                <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
                <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
            </ul>
        </div>
    </div>
</div>
</body>

css：

body,ul{
    margin:0px;
    padding:0px;
}
ul{
    list-style:none;
}

a{
    text-decoration:none;
}

.tab_wrap{
    width:500px;
    height:300px;
    margin:50px auto 0;
    overflow:hidden;
    position:relative;
}

.tab_btns{
    height:50px;
}
.tab_btns input{
    width:100px;
    height:50px;
    border:0px;
    background:#ddd;
    font-size:14px;
    outline:none;
}
.tab_btns .current{
    background:gold;
}
.tab_cons{
    height:250px;
    width:1500px;
    background:gold;
    position:absolute;
    left:0px;
    top:50px;
}

.tab_cons ul{
    width:500px;
    height:235px;
    float:left;
    padding-top:15px;
}

.tab_cons ul li{
    line-height:30px;
    margin:5px 20px;
    overflow:hidden;
}

.tab_cons ul a{
    font-size:14px;
    color:#333;
    float:left;
}

.tab_cons ul span{
    font-size:14px;
    color:#666;
    float:right;
}

相关推荐