标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="name" content="content" charset=‘utf-8‘>
<script src="jquery-1.12.4.min.js"></script>
<style type="text/css" media="screen">
/*tab切换*/
.list-tab{
position: relative;
top: 0;
left: 0;
z-index: 10;
box-sizing: border-box;
width: 100%;
height: 50px;
background: #fff;
font-size: 14px;
line-height: 50px;
}
.list-tab-fill{
position: absolute;
margin-bottom: 12px;
width: 100%;
height: 50px;
max-width: 640px;
}
.list-tab ul {
position: relative;
/*box-shadow: 0 1px 3px rgba(0, 0, 0, .2);*/
overflow: hidden;
}
.list-tab li{
position: relative;
float: left;
overflow: hidden;
width: 25%;
color: #666;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.list-tab li.slider {
position: absolute;
bottom: 0;
left: 40px;
display: block;
height: 2px;
background: #6E5EA6;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.list-tab li.current{
color: #6E5EA6;
}
.ripple {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(108, 0, 255, 0.2);
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
-ms-transform: scale(0);
}
.rippleEffect {
-webkit-animation: rippleDrop .6s linear;
animation: rippleDrop .6s linear;
}
@-webkit-keyframes rippleDrop {
100% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
}
@keyframes rippleDrop {
100% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
}
</style>
</head>
<body>
<script>
function resetFontSize(){
$(‘html‘).css(‘font-size‘, $(‘body‘).width()/16);
}
resetFontSize();
$(window).resize(function(){
resetFontSize();
});
</script>
<div class="list-tab">
<div class="list-tab" id="list-tab">
<ul class="clearfix">
<li data-tab="1">公司介绍</li>
<li data-tab="2">团队介绍</li>
<li data-tab="3">加入我们</li>
<li class="slider"></li>
</ul>
</div>
</div>
<script>
$(‘ul‘).on(‘touchstart‘,‘li‘,function(e){
var self = $(this);
// 当前tab所在第几个
var buttonWidth = self.width(),buttonHeight = self.height();
var whatTab = self.index(),slider=$(‘.slider‘);
//需要移动多少距离
var howFar = buttonWidth * whatTab;
slider.css({
left: (howFar)+ 40 + "px"
});
$(".ripple").remove(‘.ripple‘);
self.prepend("<span class=‘ripple‘></span>");
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: 0,
left: 0
}).addClass("rippleEffect");
e.preventDefault();
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/ws-zhangbo/p/5737638.html
