滑动效果的标签页切换
演示地址：演示
为每个标签页与相应的按钮设置class，根据不同位置的标签页做不同的变形处理，使用translate3d不会改变元素原本的位置因此不会导致浏览器对相关layout进行重计算，并且translate3d可以触发GPU加速，提升性能。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body,html { 8 height: 100%; 9 width: 100%; 10 font-size: 10px; 11 } 12 #box { 13 position: absolute; 14 top: 0; 15 left: 0; 16 right: 0; 17 bottom: 0; 18 margin: auto; 19 border: 1px solid black; 20 width: 60rem; 21 height: 36rem; 22 overflow-x: hidden; 23 } 24 .nav { 25 width: 100%; 26 height: 6rem; 27 position: absolute; 28 top: 0; 29 left: 0; 30 } 31 .nav button { 32 display: inline-block; 33 background: black; 34 color: #fff; 35 width: 25%; 36 height: 100%; 37 border: none; 38 text-align: center; 39 border-right: 1px solid #fff; 40 box-sizing: border-box; 41 cursor: pointer; 42 } 43 .nav button:last-child { 44 border-right: none; 45 } 46 .content{ 47 position: absolute; 48 top: 6rem; 49 left: 0; 50 width: 100%; 51 } 52 .content .tab { 53 position: absolute; 54 top:0; 55 width: 100%; 56 height: 30rem; 57 transition: transform .8s; 58 } 59 </style> 60 </head> 61 <body> 62 <div id="box"> 63 <div class="nav"> 64 <button class="btn0">page1</button><button class="btn1">page2</button><button class="btn2">page3</button><button class="btn3">page4</button> 65 </div> 66 <div class="content"> 67 <div class="tab tab0" style="background: blue;left:0">tab two</div> 68 <div class="tab tab1" style="background: red;left:60rem">tab one</div> 69 <div class="tab tab2" style="background: yellow;left:120rem">tab three</div> 70 <div class="tab tab3" style="background: pink;left:180rem">tab four</div> 71 </div> 72 </div> 73 <script> 74 window.onload = function() { 75 slideTab('nav','tab',60); 76 } 77 function slideTab(rootName,tabName,width) { 78 var nav = document.querySelector('.'+rootName); 79 var len = document.querySelectorAll('.'+tabName).length; 80 81 nav.addEventListener('click',function(e) { 82 var name = e.target.className; 83 var pattern = /btn([0-9]+)/g; 84 var index = name.match(pattern)[0].slice(3); 85 86 for(var i = 0; i < len; i++) { 87 document.querySelector('.tab'+i).style.transform = 'translate3d('+ -width * index +'rem,0,0)';88 } 89 }) 90 } 91 </script> 92 </body> 93 </html>
