动画效果

最新推荐文章于 2023-06-22 21:22:32 发布

**星光*

最新推荐文章于 2023-06-22 21:22:32 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/weixin_42322206/article/details/84780303

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    // 请写出实现的代码：
    // 提示：基本原理是改变列表容器的left值，根据点击的tab动画运动到对应的left值
// 	$(function(){
// 		$('.tab_btns input').click(function(){
// 		$(this).addClass('current').siblings().removeClass('current')
//		$('.tab_cons').animate({
//			'left':-
//			$(this).index()*500
//		})
//		})
// 			
// 	})
    </script>
</head>
<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">
            <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>
</body>
<script type="text/javascript">
$('.tab_btns input').click(function(){
 		$(this).addClass('current').siblings().removeClass('current')
		$('.tab_cons').animate({
			'left':-
			$(this).index()*500
		})
		})
</script>
</html>

miancss

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;
}

.pop_main{
    display:none;
}

.pop_con{
    width:500px;
    height:300px;
    background:#fff;
    border-radius:4px;
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-250px;
    margin-top:-150px;
    border:1px solid #f0f0f0;
    z-index:9999;
}
.pop_title{
    width:490px;
    height:40px;
    background:#157bef;
    margin:5px auto 0;
    border-radius:6px;
}
.pop_title h3{
    float:left;
    margin:0px;
    margin-left:10px;
    line-height:40px;
    color:#fff;
    font-size:18px;
    font-weight:normal;
}
.pop_title a{
    float:right;
    width:20px;
    height:20px;
    background:#fff;
    margin:10px 10px 0 0;
    text-decoration:none;
    line-height:20px;
    text-align:center;
    font-size:20px;
    border-radius:4px;
}
.pop_detail{
    height:200px;
    border-bottom:1px solid #f0f0f0;
    /* 解决margin-top塌陷 */
    overflow:hidden;
}

.pop_footer{
    height:54px;
}
.pop_footer .confirm,.pop_footer .cancel{
    float:right;
    width:100px;
    height:36px;
    background:#157bef;
    border:0px;
    color:#fff;
    font-size:16px;
    border-radius:4px;
    margin:9px 10px 0 0;
}
.pop_footer .cancel{
    background:#ddd;
    color:#666;
    margin-right:20px;
}
.mask{
    width:100%;
    height:100%;
    background:#000;
    position:fixed;
    left:0;
    top:0;
    opacity:0.3;
    filter:alpha(opacity=30);
    z-index:9990;
}
.pop_text{
    margin:74px 0 0 100px;
    font-size:20px;
    color:#666;
}