以下是 html5 tab滑动切换选项卡滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 tab滑动切换选项卡</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<!-- TAB TEMPLATE -->
<svg height="0" width="0" style="position: absolute; margin-left: -100%;">
<defs>
<filter id='shadow'>
<feComponentTransfer in="SourceGraphic">
<feFuncR type="discrete" tableValues="0"/>
<feFuncG type="discrete" tableValues="0"/>
<feFuncB type="discrete" tableValues="0"/>
</feComponentTransfer>
<feGaussianBlur stdDeviation="1"/>
<feComponentTransfer><feFuncA type="linear" slope="0.2"/></feComponentTransfer>
<feOffset dx="5" dy="1" result="shadow"/>
<feComposite in="SourceGraphic" />
</filter>
<linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%">
<stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" />
<stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" />
</linearGradient>
<linearGradient id="tab-2-bg" x1="0%" y1="0%" x2="0%" y2="65%">
<stop offset="0%" style="stop-color: rgba(149, 190, 233, 1.0);" />
<stop offset="100%" style="stop-color: rgba(112, 153, 213, 1.0);" />
</linearGradient>
<linearGradient id="tab-3-bg" x1="0%" y1="0%" x2="0%" y2="65%">
<stop offset="0%" style="stop-color: rgba(61, 149, 218, 1.0);" />
<stop offset="100%" style="stop-color: rgba(43, 130, 197, 1.0);" />
</linearGradient>
<linearGradient id="tab-4-bg" x1="0%" y1="0%" x2="0%" y2="65%">
<stop offset="0%" style="stop-color: rgba(72, 204, 243, 1.0);" />
<stop offset="100%" style="stop-color: rgba(71, 194, 243, 1.0);" />
</linearGradient>
</defs>
<path id="tab-shape" class="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486
z">
</svg>
<nav role="navigation" class="main-navigation">
<ul>
<li class="tab-1 active" data-bg-color="rgba(118, 160, 192, 1.0)">
<a href="#home">
<span>Home</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-2" data-bg-color="rgba(112, 153, 213, 1.0)">
<a href="#about">
<span>About</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-3" data-bg-color="rgba(43, 130, 197, 1.0)">
<a href="#clients">
<span>Clients</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-4" data-bg-color="rgba(71, 194, 243, 1.0)">
<a href="#contact">
<span>Contact</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
</ul>
</nav>
<div class="main-content">
<article class="article">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa totam cumque ad repellendus ab ea repellat aperiam accusantium labore officia est culpa fugiat eaque magnam a. Labore molestias ea at maiores inventore veritatis cupiditate cum doloribus quisquam eum et asperiores!</p>
</article>
</div>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS代码(index.js):
var menuItems = $('.main-navigation li');
menuItems.on("click",function(event){
menuItems.removeClass("active");
$(this).addClass("active");
$(".main-content").css({
"background":$(this).data("bg-color")}
);
event.preventDefault();
}
);
CSS代码(style.css):
*{box-sizing:border-box;}
body{padding:1rem 3rem;font-family:'Cabin',sans-serif;line-height:1.4;min-width:925px;}
a{text-decoration:none;}
.main-navigation{overflow:hidden;position:relative;padding:0 0 0 1rem;/* &::after{content:"";position:absolute;bottom:16px;left:0;width:798px;height:12px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));z-index:5;}
*/
}
.main-navigation ul{list-style:none;padding:0;}
.main-navigation li{float:left;width:12rem;height:5rem;margin:0 0 0 -1rem;position:relative;}
.main-navigation li.active{z-index:6;}
.main-navigation a{position:relative;display:inline-block;color:white;width:100%;height:100%;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.4rem;text-shadow:0 1px 0 rgba(0,0,0,0.4);}
.main-navigation svg{width:120%;height:100%;position:absolute;top:0;left:0;z-index:1;pointer-events:none;}
.main-navigation span{position:relative;padding:1rem 0 0 3.3rem;z-index:2;display:inline-block;width:100%;height:100%;}
.main-navigation .tab-1{z-index:4;}
.main-navigation .tab-1 svg{fill:url(#tab-1-bg);}
.main-navigation .tab-2{z-index:3;}
.main-navigation .tab-2 svg{fill:url(#tab-2-bg);}
.main-navigation .tab-3{z-index:2;}
.main-navigation .tab-3 svg{fill:url(#tab-3-bg);}
.main-navigation .tab-4{z-index:1;}
.main-navigation .tab-4 svg{fill:url(#tab-4-bg);}
.main-content{position:relative;z-index:10;background:#76a0c0;margin:-1.6rem 0 0 0;padding:3rem;border-radius:15px;border-top-left-radius:0;}
.article{background:white;padding:5rem;border-radius:8px;}
.article h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:3rem;color:#76a0c0;margin:0 0 0.5rem 0;}
分享到QQ
分享到微博
微信扫一扫
