jQuery小练习
<!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>
$(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>
</html>
HTML代码：
<!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>
$(function(){
var $pop_con = $('.pop_main');
var $pop = $('.pop_con');
var iTop = $pop.css('top');
$('#btn').click(function(){
$pop_con.show();
$pop.css({'opacity':0,'top':0});
$pop.animate({'opacity':1,'top':iTop});
});
$('.pop_title a,.cancel').click(function(){
$pop.animate({'opacity':0,'top':0},function(){
$pop_con.hide();
});
});
})
</script>
</head>
<body>
<input type="button" value="弹出弹框" id="btn">
<div class="pop_main">
<div class="pop_con">
<div class="pop_title">
<h3>系统提示</h3>
<a href="#">×</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲！确定要这么做吗？</p>
</div>
<div class="pop_footer">
<input type="button" value="取 消" class="cancel">
<input type="button" value="确 定" class="confirm">
</div>
</div>
<div class="mask"></div>
</div>
</body>
</html>
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;
}
.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;
}
注意用的所有的jQuery都是1.12.4
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读