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

来源：互联网发布：linux显卡驱动安装编辑：程序博客网时间：2024/04/28 08:41

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");});}

0 0