css3实现的翻转特效及tab切换功能

最新推荐文章于 2024-09-19 14:11:58 发布

sun-shadow

最新推荐文章于 2024-09-19 14:11:58 发布

阅读量2k

点赞数

分类专栏： web前端文章标签： css3 html5 tab 翻转

本文链接：https://blog.csdn.net/u013494746/article/details/39230829

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

reserve.html

<html>
	<head>
  <link rel="stylesheet" href="css/style.css" />
  <script src="js/tab.js" type="text/javascript"></script>
	</head>
	<body>
	<div class="container">
		<div class="tabs"><span class="tab-label">home</span><span class="tab-label">info</span><span class="tab-label">new</span></div>
	  <div>
	  	<ul class="tab-panel tab-panel-active list">
	  		<li class="list-li"><span class="li-title">first</span><span class="li-info">hello</span></li>
	  		<li class="list-li"><span class="li-title">second</span><span class="li-info">word</span></li>
	  		<li class="list-li last"><span class="li-title">third</span><span class="li-info">no say</span></li>
	  	</ul>
	  	<div class="tab-panel intro">introduce the web</div>
	  	<div class="tab-panel intro">some news</div>
	  </div>
	</div>
	<div class="button">查看翻转效果</div>
</body>
</html>

css/style.css

body{
	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background:#ffffcc;
	color:#666;
	line-height:1.5em;
	font-size:16px;
	}

.container{
	position:absolute;
	width:500px;
	height:450px;
	left:50%;
	top:50%;
	margin:-225px 0 0 -250px;
	opacity:0;
	-webkit-transform:rotateY(90deg);
	-moz-transform:rotateY(90deg);
	-ms-transform:rotateY(90deg);
	-o-transform:rotateY(90deg);
	transform:rotateY(90deg);
	-webkit-transition:2s;
	-moz-transition:2s;
	-ms-transition:2s;
	-o-transition:2s;
	transition:2s;
	}
.container-visible{
	opacity:1;
  -webkit-transform:rotateY(0);
	-moz-transform:rotateY(0);
	-o-transform:rotateY(0);
	-ms-transform:rotateY(0);
	transform:rotateY(0);
	}
.tabs{
	margin-bottom:10px;
	}
.tab-label{
	display:inline-block;
	background:#ffcc99;
	padding:10px 20px;
	font-size:12px;
	line-height:22px;
	font-weight:bold;
	color:#000;
	text-transform:uppercase;
	letter-spacing:1px;
	opacity:0.5;
	cursor:pointer;
	margin-right:3px;
	}
.tab-label:hover{
	background:#ff9900;
	opacity:1;
	}
.tab-label-active{
	background:#ff9900;
	opacity:1;
	}
.tab-panel{
	display:none;
	}
.tab-panel-active{
	display:block;
	}
.list{
	list-style:none;
	cursor:point;
	padding:0;
	}
.list-li{
	background:#ffcc99;
	font-size:12px;
	line-height:22px;
	font-weight:bold;
	text-transform:capitalize;
	letter-spacing:1px;
	padding:20px;
	color:#333;
	opacity:0.7;
	margin-top:1px;
	cursor:pointer;
	}
.list-li:hover{
	opacity:1;
	}
.li-title{
	display:inline-block;
	text-transform:capitalize;
	width:200px;
	}
.li-info{
	display:inline-block;
	width:200px;
	color:#aaa;
	}
.last{
	margin-top:9px;
	}
.intro{
	background:#ffcc99;
	opacity:0.5;
	z-index:2;
	height:200px;
	text-align:center;
	}
.button{
	position:absolute;
	width:100px;
	height:25px;
	top:60%;
	left:50%;
	margin:0 0 0 -100px ;
	background:#ffcc99;
	color:#000;
	}

/js/tab.js

window.onload = function(){
	var tabs = document.querySelector(".tabs");
	var tab_labels = document.querySelectorAll(".tab-label");
	var tab_panels = document.querySelectorAll(".tab-panel");
	var overlay = document.querySelector(".container");
	var bt = document.querySelector(".button");
	tabs.addEventListener('click',function (e){
		var el = e.target;
		var index;
		if(el.classList.contains("tab-label"))
		{
				for(var i = 0;i < tab_labels.length ;i++)
				{
					tab_labels[i].classList.remove("tab-label-active");	
					tab_panels[i].classList.remove("tab-panel-active");
					if(el === tab_labels[i])
					{
						index = i;	
					}
				}
				tab_labels[index].classList.add("tab-label-active");
				tab_panels[index].classList.add("tab-panel-active");
		}
		});
		
	bt.addEventListener('click',function(){
			overlay.classList.toggle("container-visible");
			for(var i = 0;i < tab_labels.length ;i++){
				tab_labels[i].classList.remove("tab-label-active");	
				tab_panels[i].classList.remove("tab-panel-active");
				}
			tab_labels[0].classList.add("tab-label-active");
			tab_panels[0].classList.add("tab-panel-active");
			});
				
	}