滑动效果的标签页切换

最新推荐文章于 2021-10-21 22:23:07 发布

diaotan7234

最新推荐文章于 2021-10-21 22:23:07 发布

阅读量373

点赞数

原文链接：http://www.cnblogs.com/cjw-ryh/p/7847389.html

版权

演示地址：演示

为每个标签页与相应的按钮设置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>