WEB前端tab标签页滑动效果
摘要：前端开发需要美术功底吗 学前端开发需要学哪些、 前端需要搭建开发环境吗 tab标签页切换在各个网站太常见了，这里介绍一种滑动的效果 html 代码片段 <!DOCTYPE html> <html> <head> <me……
前端开发需要美术功底吗 学前端开发需要学哪些、 前端需要搭建开发环境吗
tab标签页切换在各个网站太常见了，这里介绍一种滑动的效果
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title></title>
</head>
<style type=”text/css”>
li {
list-style: none;
}
.tab {
height: 55px;
position: relative;
width: 500px;
margin: 0 auto;
}
.tab ul li {
cursor: pointer;
padding-top: 15px;
font: normal 16px/1.5 “microsoft yahei”;
text-align: center;
width: 70px;
height: 40px;
background: #eeeeee;
float: left;
}
.tab ul li:hover {
font-size: 17px;
}
.curline {
display: block;
width: 70px;
height: 3px;
background: #766cca;
position: absolute;
bottom: 0px;
}
</style>
<body>
<div class=”tab”>
<ul>
<li>综合</li>
<li>新闻</li>
<li>活动</li>
<li>公告</li>
<li>媒体</li>
</ul>
<span class=”curline”></span>
</div>
<script src=”http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript”>
$(function () {
var liWidth = $(‘.tab ul li’).eq(0).width();
$(‘.tab ul li’).hover(function () {
$(‘.curline’).stop();
var liIndex = $(this).index();
$(‘.curline’).animate({
left: liWidth * liIndex + ‘px’
});
})
})
</script>
</body>
</html>
前端开发需要学几年 web前端开发需要切图吗 web前端开发需要掌握哪些
» 本文来自：前端开发者 » 《WEB前端tab标签页滑动效果》
» 本文链接地址：https://www.rokub.com/5874.html
» 您也可以订阅本站：https://www.rokub.com
近期评论