<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="name" content="content" charset=‘utf-8‘> <script src="jquery-1.12.4.min.js"></script> <style type="text/css" media="screen"> /*tab切换*/ .list-tab{ position: relative; top: 0; left: 0; z-index: 10; box-sizing: border-box; width: 100%; height: 50px; background: #fff; font-size: 14px; line-height: 50px; } .list-tab-fill{ position: absolute; margin-bottom: 12px; width: 100%; height: 50px; max-width: 640px; } .list-tab ul { position: relative; /*box-shadow: 0 1px 3px rgba(0, 0, 0, .2);*/ overflow: hidden; } .list-tab li{ position: relative; float: left; overflow: hidden; width: 25%; color: #666; text-align: center; text-transform: uppercase; cursor: pointer; } .list-tab li.slider { position: absolute; bottom: 0; left: 40px; display: block; height: 2px; background: #6E5EA6; -webkit-transition: all 0.5s; transition: all 0.5s; } .list-tab li.current{ color: #6E5EA6; } .ripple { position: absolute; width: 0; height: 0; border-radius: 50%; background: rgba(108, 0, 255, 0.2); opacity: 1; -webkit-transform: scale(0); transform: scale(0); -ms-transform: scale(0); } .rippleEffect { -webkit-animation: rippleDrop .6s linear; animation: rippleDrop .6s linear; } @-webkit-keyframes rippleDrop { 100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2); } } @keyframes rippleDrop { 100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2); } } </style> </head> <body> <script> function resetFontSize(){ $(‘html‘).css(‘font-size‘, $(‘body‘).width()/16); } resetFontSize(); $(window).resize(function(){ resetFontSize(); }); </script> <div class="list-tab"> <div class="list-tab" id="list-tab"> <ul class="clearfix"> <li data-tab="1">公司介绍</li> <li data-tab="2">团队介绍</li> <li data-tab="3">加入我们</li> <li class="slider"></li> </ul> </div> </div> <script> $(‘ul‘).on(‘touchstart‘,‘li‘,function(e){ var self = $(this); // 当前tab所在第几个 var buttonWidth = self.width(),buttonHeight = self.height(); var whatTab = self.index(),slider=$(‘.slider‘); //需要移动多少距离 var howFar = buttonWidth * whatTab; slider.css({ left: (howFar)+ 40 + "px" }); $(".ripple").remove(‘.ripple‘); self.prepend("<span class=‘ripple‘></span>"); $(".ripple").css({ width: buttonWidth, height: buttonHeight, top: 0, left: 0 }).addClass("rippleEffect"); e.preventDefault(); }); </script> </body> </html>
时间: 2024-09-27 07:00:27